跨域的九种方式（个人概括性总结）

为什么会跨域：

因为所有的浏览器都遵循由网景公司提出的著名的安全策略-同源策略， 所谓同源是指域名、协议、端口相同，当页面在执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求资源的时，浏览器会在控制台报一个异常，提示拒绝访问。

 

跨域的解决方案：

一、通过jsonp跨域

原理：动态创建script标签，利用标签的src属性不受同源策略限制的特点将请求到的数据放到回调函数里面当参数；

与cors相比：支持get请求与老式浏览器；

 

二、跨域资源共享(CORS)

用法简而言之：是服务端设置Access-Control-Allow-Origin字段为相关域名或者*；

支持所有请求方式，老式浏览器上无法使用

 

三、WebSocket协议跨域

H5新特性，对http协议上的补充，可提供全双工通信；

使用时先new 一个WebSocket, 按需监听open、message、 error、与close事件实现需求；

 

四、node.js中间件代理跨域

使用webpack做前端自动化构建工具时，修改webpack-dev-server的proxy属性；

其他情况引用http-proxy-middleware模块；

 

五、nginx代理跨域

在nginx.conf文件里面配置server下面的location；

 

六、postMessage跨域

发送方用postMessage(data,origin)方法， 接收方监听message事件；

 

七、window.name+iframe跨域

利用同一个窗口中的代码共享window.name属性且iframe的src属性不受同源策略限制的特点；

传输方设置window.name的值，接收方设置一个隐藏的iframe，在iframe onload时获取iframe.contentWindow.name;

 

八、document.domain+iframe跨域

在主域的情况下相同，把document.domain设置成自身或更高一级的父域，也需要引入iframe；

 

九、location.hash+iframe跨域

服务端将数据当做改变后的路径的hash值加在路径上， ifram加载时获取；

 

 

更多详细内容链接：

前端大全-九种跨域方式实现原理：https://mp.weixin.qq.com/s/LV7qziMyrMt0_EJWo05qkA