跨域的实现方式有哪些？

跨域的实现方式有很多种，比较典型的两种方式jsonp和CORS可以参考我之前的博客：
添加链接描述
参考：前端常见跨域解决方案（全）
前端各种跨域（上）
前端各种跨域（下）

什么是跨域？

狭义的跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。

同源：协议+端口+域名三者相同
同源策略限制哪些行为？
- Cookie LocalStorage和IndexDB无法读取
- DOM 和JS对象无法获得
- AJAX请求不能发送

跨域解决方案

通过jsonp跨域
document.domain + iframe跨域
location.hash + iframe跨域
window.name + iframe跨域
postMessage跨域
跨资源共享(CORS)
nginx代理跨域
nodejs中间件代理跨域
WebSocket协议跨域

1、jsonp

简单归纳：
因为<script>标签的src属性并不被同源策略所约束，可以获取任何服务器上脚本执行，所以jsonp的实现原理主要是利用<script>标签的src属性，局限性：只支持get方法

设定一个<script>标签
创建一个回调函数，允许用户传递这个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹JSON数据，完成回调
客户端接收到返回的js脚本，开始解析和执行

jsonp实现：参考：jsonp的原理与实现

简单实现：

function jsonp(req) {
  var script = document.createElement('script');
  var url = req.url + '?callback=' + req.callback.name;
  script.src = url;
  document.getElementsByName('head')[0].appendChild(script);
}
function hello(res) {
  console.log('hello' + res.data);
}

//  使用
jsonp({
  url: '',
  callback: hello
})

总结：Ajax（异步javascript和xml）, 是一种可实现无需重新加载整个网页的情况下，能够更新部分网页的技术，其核心是通过XMR对象获取非本页内容 => 异步通信

而jsonp的核心则是动态添加

Ajaxとjsonpの関係

Ajaxとjsonpは、呼び出しメソッドが非常によく似ており、目的は同じです。どちらもURLを要求し、サーバーから返されたデータを処理します。したがって、jqueryやextなどのフレームワークは、jsonpをajaxの一部と見なします。カプセル化
Ajaxとjsonpは本質的に異なります。ajaxのコアはXmlHttpRequestを介して非ページコンテンツを取得することであり、jsonpのコアは動的に追加することです

2. Document.domain + iframeクロスドメイン

実装原理：両方のページがjsを通じてdocument.domain基本的なプライマリドメインとして設定され、同じドメインが実現されます。
制限：プライマリドメインが同じでサブドメインが異なるクロスアプリケーションシナリオのみ。

参照：
document.domain + iframeを通じてクロスドメインの問題を解決する

3. Location.hash + iframeクロスドメイン

実現原理：a.html（Aドメインに属する）とb.html（Bドメインに属する）は、中間ページc.html（Aドメインに属する）を介して通信したい。iframeのlocation.hashは、異なるドメイン間で値を転送するために使用され（ハッシュ値を変更してもページが更新されないため）、同じドメイン間のjsアクセスに直接通信します。
a.htmlにiframeを作成し、そのsrcがb.htmlを指し、b.htmlにハッシュ値を渡し、b.htmlがa.htmlから渡されたハッシュ値を監視して、c.htmlに渡します（b.html内） srcがc.htmlを指すようにiframeを作成します）

参照：iFrameクロスドメイン
 location.hashはクロスドメインiframe自己適応を実現します
利点：

完全に異なるドメイン名でクロスドメインを解決できます
双方向通信を実現できます

制限：

location.hashはURLで直接公開されます
URLサイズの制限により、データ容量とタイプが制限されています

4、window.name + iframe跨域

5、postMessage跨域

postMessage是html5引入的API，可以更方便、有效、安全的解决这些问题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递，即，可解决：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递

6、跨资源共享CORS

其原理主要是通过服务端在头部信里设置Access-Control-Allow-Origin即可，前端无需设置；
若要带Cookie请求，需要前后端都进行设置，因为CORS请求默认不发送cookie和HTTP认证信息，若要把cookie发送到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段，另一方面，开发者必须在AJAX请求中打开withCredentials属性，否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理
且

如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名
由于同源策略的限制，所读取的Cookie为跨域请求接口所在域的cookie，而非当前页。只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

局限：对于不支持CORS的浏览器无法使用该策略。

参考：CORS-阮一峰

7、nginx代理跨域

フォワードプロキシプロキシクライアント（VPNなど）、リバースプロキシプロキシサーバー
Nginxは、宛先ホストにインストールされた高性能のHTTPおよびリバースプロキシWebサーバーであり、主にクライアント要求の転送に使用されます。バックグラウンドには複数のhttpサーバーがあります。サービスを提供するために、nginxの機能は、要求を後続のサーバーに転送し、現在の要求を処理するターゲットホストを決定することです。**
実装のアイデア：nginxを介してプロキシサーバーを構成します（ドメイン名はdomain1と同じで、ポートは異なります）。プロキシドメイン2インターフェース（nginxリバースプロキシモジュールproxy_passの後に、URLパラメータで指定されたサーバーにリクエストをリバースプロキシするURLが続きます）、次にdomain1がnginxのプロキシサーバーにアクセスし、リクエストはdomain2に転送されます

server {
        listen       80;
        server_name  localhost;
        ## 用户访问 localhost，则反向代理到https://api.shanbay.com
        location / {
            root   html;
            index  index.html index.htm;
            proxy_pass https://api.shanbay.com;
        }
}

リファレンス：nginxリバースプロキシ
 はNginxを使用してリバースプロキシを実装します

8. Node.jsミドルウェアエージェントのクロスドメイン

nginxプロキシサーバーがNodeサーバーに置き換えられていることを除いて、それはnginxリバースプロキシに非常に似ています。

9、webSocket

WebSocket自体にはクロスドメインの問題
がないため、同じでないソース間の通信にwebSocketを使用できます。WebSocketは、同一生成元ポリシーを実装しない通信プロトコルです。サーバーがそれをサポートしている限り、クロス生成元通信に使用できます。リクエストヘッダーにoriginフィールドがあります。Originフィールドのため、WebSocketは同一生成元ポリシーを実装していません。サーバーはこのフィールドに従ってこの通信を許可するかどうかを判断できるためです。ドメイン名がホワイトリストにある場合、サーバーは次のように応答します。