关于跨域的基本点（自用）

参考转载网页的某网友评论

总结：

1、自行设置域名

document.domain = 'test.com'(用于主域相同，子域不同的跨域访问)

 

2、跨文档通信API(html5)——window.postMessage(一般用于父子窗口)

利用window.open打开子窗口，通过postMessage发送信息，监听window的message事件的返回信息。

A：contentWindow.postMessage(message, url(源A))，向B传递信息

B：window.onmessage = function(ev) { console.log(ev); }

 

3、CORS——跨域资源分享

核心思想是通过自定义http请求头，来决定请求和响应是否能成功。

客户端发送ajax/fetch请求；

服务器端设置相关的头信息，需要处理options试探性请求

 

对于简单请求：

前端添加origin:http://www.test.com的origin头。如果需要添加cookie，ajax 请求需要设置 xhr 的属性 withCredentials 为 true（允许携带数据凭证）

后端设置Access-Control-Allow-Origin允许跨域访问。

对于复杂请求：

大概的方向就是，客户端先发送一个preflight请求，其中包含origin，自身请求方法信息，自定义的请求头信息，用于向服务器试探性获取其“信任”。服务器若允许，也会将携带Access-Control-Allow-origin(-header/-methods/-age)四种信息回复给客户端。{哪些源，哪些请求方法，哪些请求头等}

则以后每次正常的跨域请求都将跟简单请求一样了。

 

缺点：服务器端一次只能设置一个源(具体地址)，而如果设置源为*(多源)时，则客户端不能携带cookie。

 

4、JONSP：script标签不受浏览器同源策略影响

利用这一特性，思想就是自行动态创建script标签访问url，设置callback函数接受返回信息。

对于Jquery，Jquery可以帮助用户发送jsonp的请求，只需将datatype设置为jsonp。

服务器端返回字符串格式的数据 "function callback(){JSON.stringify(data)}"，浏览器会根据返回的字符串中携带者函数信息，执行js中的该回调函数(浏览器机制，执行字符串中的函数)。

 

缺点：支支持get请求，容易被url劫持拦截；如果服务器返回的不是一个正常函数，而是一个木马程序，客户端也会自动执行。

 

5、http proxy：webpack/webpack-dev-server

如果使用了webpack，那么可以在webpack-dev-server插件(webpack-config.js)中，配置proxy属性。

proxy: {
    '/': {
        target: 'http://****',  //允许跨域的源
        changeOrigin: true,  //允许跨域

    }
}

 

6、ngnix反向代理（服务器代理）：不需要前端做什么

 

7、Websocket协议跨域：

let socket = websocket.io(url);

socket.on()方法

 

8、图像ping跨域：类似于JSONP，img标签不受同源策略影响(只支持get)

创建img，并设置其url，通过html5的onerror事件处理返回数据

 

 

 

 

相关解决方法详情参考：https://blog.csdn.net/qq_38128179/article/details/84956552

https://www.cnblogs.com/laixiangran/p/9064769.html(收藏夹)