跨域的几种方式

1.jsonp 跨域(优点:简单方便,缺点:只能使用 get 请求,不支持 post 请求)
2.Nginx 的反向代理(少用) apach tomact
3.window.name(少用)
4.axios 反向代理,
5.cors(跨域资源共享)修改服务器端修改包的头部信息,
6.iframe 跨子域(不常用）
7.fetch

跨域的方法有哪些？原理是什么？

1.jsonp

尽管浏览器有同源策略，但是 <script> 标签的src 属性不会被同源策略所约束，可以获取任意服务器上的脚本并执行。jsonp 通过插入script标签的方式来实现跨域，参数只能通过url传入，仅能支持get请求。
实现原理:
Step1: 创建 callback 方法
Step2: 插入 script 标签
Step3: 后台接受到请求，解析前端传过去的 callback 方法，返回该方法的调用，并且数据作为参数传入该方法
Step4: 前端执行服务端返回的方法调用
下面代码仅为说明 jsonp 原理，项目中请使用成熟的库。分别看一下前端和服务端的简单实现：

//前端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <script>
    //step1:创建callba方法
    function getData(data){
        console.log(data)
    }    
    //step2:插入script节点
    var script = document.createElement('script');
    script.src = 'http://localhost:3000?callback=getData';
    //=>getData({})
    document.body.appendChild(script);
    </script>

</body>
</html>

//js代码
//导入koa框架
const Koa = require('koa')
//创建实例
const app = new Koa();
//use里的函数成为中间插件
app.use((ctx)=>{
    let callback = ctx.query.callback;
    let data={
        code:666,
        msg:'success',
        data:{
            username:'zhangzhang',
            age:100,
            callback
        }
    }

    let dataStr = JSON.stringify(data);
    let res = callback+'('+dataStr+')';
    ctx.body = res
});
app.listen(3000,()=>{
    console.log('http://localhost:3000')
})

2.cors

jsonp 只能支持 get 请求，cors 可以支持多种请求。cors 并不需要前端做什么工作。

简单跨域请求:
只要服务器设置的Access-Control-Allow-Origin Header和请求来源匹配，浏览器就允许跨域

请求的方法是get，head或者post。
Content-Type是application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一个值，或者不设置也可以，一般默认就是application/x-www-form-urlencoded。
请求中没有自定义的HTTP头部，如x-token。(应该是这几种头部 Accept，Accept-Language，Content-Language，Last-Event-ID，Content-Type）

//简单跨域请求
app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', 'XXXX');
});复制代码

带预检(Preflighted)的跨域请求
不满于简单跨域请求的，即是带预检的跨域请求。服务端需要设置 Access-Control-Allow-Origin (允许跨域资源请求的域) 、 Access-Control-Allow-Methods (允许的请求方法) 和 Access-Control-Allow-Headers (允许的请求头)

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', 'XXX');
    res.setHeader('Access-Control-Allow-Headers', 'XXX'); //允许返回的头
    res.setHeader('Access-Control-Allow-Methods', 'XXX');//允许使用put方法请求接口
    res.setHeader('Access-Control-Max-Age', 6); //预检的存活时间
    if(req.method === "OPTIONS") {
        res.end(); //如果method是OPTIONS，不做处理
    }
});

3.nginx 反向代理

使用nginx反向代理实现跨域，只需要修改nginx的配置即可解决跨域问题。
A网站向B网站请求某个接口时，向B网站发送一个请求，nginx根据配置文件接收这个请求，代替A网站向B网站来请求。 nginx拿到这个资源后再返回给A网站，以此来解决了跨域问题。
例如nginx的端口号为 8090，需要请求的服务器端口号为 3000。（localhost:8090 请求 localhost:3000/say）
nginx配置如下:

server {
    listen       8090;

    server_name  localhost;

    location / {
        root   /Users/liuyan35/Test/Study/CORS/1-jsonp;
        index  index.html index.htm;
    }
    location /say {
        rewrite  ^/say/(.*)$ /$1 break;
        proxy_pass   http://localhost:3000;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    }
  ## others
}

4.websocket

Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。
Websocket 不受同源策略影响，只要服务器端支持，无需任何配置就支持跨域。
前端页面在 8080 的端口。

let socket = new WebSocket('ws://localhost:3000'); //协议是ws
socket.onopen = function() {
    socket.send('Hi,你好');
}
socket.onmessage = function(e) {
    console.log(e.data)
}

服务端 3000端口。可以看出websocket无需做跨域配置。

let WebSocket = require('ws');
let wss = new WebSocket.Server({port: 3000});
wss.on('connection', function(ws) {
    ws.on('message', function(data) {
        console.log(data); //接受到页面发来的消息'Hi,你好'
        ws.send('Hi'); //向页面发送消息
    });
});

5.postMessage

postMessage 通过用作前端页面之前的跨域，如父页面与iframe页面的跨域。window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

话说工作中两个页面之前需要通信的情况并不多，我本人工作中，仅使用过两次，一次是H5页面中发送postMessage信息，ReactNative的webview中接收此此消息，并作出相应处理。另一次是可轮播的页面，某个轮播页使用的是iframe页面，为了解决滑动的事件冲突，iframe页面中去监听手势，发送消息告诉父页面是否左滑和右滑。

子页面向父页面发消息

父页面

window.addEventListener('message', (e) => {
    this.props.movePage(e.data);
}, false);

子页面(iframe):

if(/*左滑*/) {
    window.parent && window.parent.postMessage(-1, '*')
}else if(/*右滑*/){
    window.parent && window.parent.postMessage(1, '*')
}

父页面向子页面发消息

父页面:

let iframe = document.querySelector('#iframe');
iframe.onload = function() {
    iframe.contentWindow.postMessage('hello', 'http://localhost:3002');
}

子页面:

window.addEventListener('message', function(e) {
    console.log(e.data);
    e.source.postMessage('Hi', e.origin); //回消息
});

6.node 中间件

node 中间件的跨域原理和nginx代理跨域，同源策略是浏览器的限制，服务端没有同源策略。
node中间件实现跨域的原理如下:

接受客户端请求
将请求转发给服务器。
拿到服务器响应数据。
将响应转发给客户端。

不常用跨域方法
以下三种跨域方式很少用，如有兴趣，可自行查阅相关资料。

window.name + iframe
location.hash + iframe
document.domain (主域需相同)

跨域的方法和原理