常用 4 种

跨域资源共享（CORS）
nginx代理跨域
nodejs中间件代理跨域
浏览器屏蔽安全校验

不常用 6 种

通过jsonp跨域
postMessage跨域
WebSocket协议跨域
document.domain + iframe跨域
location.hash + iframe
window.name + iframe跨域

1. 跨域资源共享（CORS）

需要服务端设置Access-Control-Allow-Origin 为 *
如果客户端需要使用cookies ，则需要设置axios.defaults.withCredentials = true

2. nginx代理跨域

通过nginx代理到同一个域名和端口下面访问。

server {
   listen       80;
   # server_name  www.josephxia.com;
   location / {
       root   /var/www/html;
       index  index.html index.htm;
       try_files $uri $uri/ /index.html;
   }

   location /api {
           proxy_pass  http://127.0.0.1:3000;
           proxy_redirect     off;
           proxy_set_header   Host             $host;
           proxy_set_header   X-Real-IP        $remote_addr;
           proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
   }
}
复制代码

3. nodejs中间件代理跨域

通过本地启动服务A ，把要请求B内容转发到本地的服务A,后面所有处理都在A上面执行。原理跟nginx方向代理类似。

  //webpack 配置
  devServer:{
       proxy:{
        "/api/":{
          target:"http://localhost:7001",
          secure:false,
          pathRewrite:{
            '^/api':""
          }
        }
      }
  }
复制代码

4. 浏览器屏蔽安全校验

谷歌浏览器直接屏蔽跨域

open -n /Applications/Google\ Chrome.app/ –args –disable-web-security –user-data-dir=/Users/jason_pro/Documents/ChormConfig

谷歌浏览器windows屏蔽跨域

谷歌快捷键-> 属性-> 目标 -> C:\Users\xxxxxx\AppData\Local\Google\Chrome\Application\chrome.exe –disable-web-security –user-data-dir=d:\MyChromeDevUserData

5. 通过jsonp跨域

通过动态创建script，再请求一个带参网址实现跨域通信。
需要服务端生成对应的js代码。客户端通过

 var script = document.createElement('script');
script.type = 'text/javascript'; 
script.src = ''//服务端返回js 
复制代码

6. postMessage跨域

postMessage是HTML5中的API,支持弹出窗，多窗口，多iframe数据交互

postMessage(data,origin)方法接受两个参数
data：可以是对象或字符串，部分浏览器只支持字符串
origin：协议+主机+端口号，也可以设置为”*”，表示可以传递给任意窗口，如果当前同源设置为”/”。

//a.html：http://www.demo1.com/a.html
<iframe id="iframe" src="http://www.demo2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'xxx'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.demo2.com');
    }; 
    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from demo2 ---> ' + e.data);
    }, false);
</script> 


// b.html:http://www.demo2.com/b.html
<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from demo1 ---> ' + e.data); 
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16; 
            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.demo1.com');
        }
    }, false);
</script> 
复制代码

7. WebSocket协议跨域

WebSocket protocol是HTML5新协议。实现浏览器与服务器全双工通信，支持跨域,可以使用第三方库Socket.io
a.html 注册socket服务c,跨域b.html 也注册socket服务c。
通过服务端同时推送消息给 a 和 b ，实现跨域数据传输,原理跟聊天室有点类似

//服务c node.js  http://api.baidu.com:3000
const express = require('express')()
const http = require('http').Server(express)
const socketIO = require("socket.io")(http)//由于参数只能是http 需要转换为传统的 http库

socketIO.on('connection', (socket) => { //每个打开页面的用户连接后的 闭包处理
    // socket 为当前打开页面的客户端 
    //添加监听到消息方法
    socket.on("chat message", (msg)=> {
        //发送广播给所有人 
        socketIO.emit("chat message",msg);
    })
    socket.on("disconnection", () => {
        console.log("链接已断开")
    })
})
// 注意使用的是 http启动 应为stocketIO绑定在http上
http.listen(3000,()=> {
    console.log("启动3000 成功")
})
复制代码

a.html www.demo1.com/a.html

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title> 
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" /><button>Send</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(function() {
        var socket = io("api.baidu.com:3000"); 
        $("form").submit(function(e) {
          e.preventDefault(); // 避免表单提交行为
          socket.emit("chat message", $("#m").val());
          $("#m").val("");
          return false;
        });

        socket.on("chat message", function(msg) {
          $("#messages").append($("<li>").text(msg));
        });
      });
    </script>
  </body>
</html>
复制代码

b.html :www.demo2.com/b.html

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title> 
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" /><button>Send</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(function() {
        var socket = io("api.baidu.com:3000"); 
        $("form").submit(function(e) {
          e.preventDefault(); // 避免表单提交行为
          socket.emit("chat message", $("#m").val());
          $("#m").val("");
          return false;
        });
        socket.on("chat message", function(msg) {
          $("#messages").append($("<li>").text(msg));
        });
      });
    </script>
  </body>
</html>
复制代码

8 document.domain + iframe跨域

只能在主域相同，子域不同的跨域应用场景。
如： www.baidu.com , api.baidu.com
A父窗口 :www.baidu.com

<iframe id="iframe" src="http://www.baidu.com/b.html"></iframe>
<script>
    document.domain = 'baidu.com';
    var user = 'admin';
</script>
复制代码

B子窗口： api.baidu.com

<script>
    document.domain = 'baidu.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);//可以直接通过parent访问
</script>
复制代码

9. location.hash + iframe

通过A和B是跨域关系，A和C是同域，

A直接用iframe给B发送hash。
B通过C做中间人，传消息给A

A页面通过url的hash传值给B页面，同时留有被C调用的公用方法
B页面一直监听hash变化，传入内嵌的C页面
C页面一直监听hash变化，并且直接调用parent.parent 告诉A页面

10 window.name + iframe跨域

window.name 在不同的页面不同域名加载后依旧存在，2M左右
a.html 通过iframe 先访问跨域b.html,再访问同域的proxy.html，这时就可以通过 iframe.contentWindow.name获取。

步骤

b.html 设置window.name = ‘xxxxx’，记录要传给a.html的内容
a.html 创建ifrme 访问跨域的 b.html,
加载完b.html后，再加载同域的 proxy.html页面，
这时候就可以通过 iframe.contentWindow.name 访问b.html 的name内容。

//a.html：http://www.demo1.com/a.html
var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
    // 加载跨域页面
    iframe.src = url;
    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
        } else if (state === 0) {
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.demo1.com/proxy.html';
            state = 1;
        }
    };
    document.body.appendChild(iframe);
};
// 请求跨域b页面数据
proxy('http://www.demo2.com/b.html', function(data){
    alert(data);
});

//poxy.html： http://www.demo1.com/proxy.html
//代理页面，内容为空 与 b同域

//b.html： http://www.demo2.com/b.html 
<script>
    window.name = 'xxxx';
</script> 

复制代码