本文共 1810 字，大约阅读时间需要 6 分钟。
什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。
同源策略：
同源是指“协议+域名+端口”三者相同。
跨域解决方案：
1.通过jsonp跨域；
2.document.domain+iframe跨域；
3.location.hash+iframe跨域；
4.window.name+iframe跨域；
5.postMessage跨域；
6.跨域资源共享（CORS）；
7.nginx代理跨域；
8.nodejs中间件代理跨域；
9.WebSocket协议跨域；
（1）通过jsonp跨域
我们知道在<html>中通过<script>标签请求其他域时不会存在跨域问题，那么基于此原理我们可以动态创建script，再请求一个带参网址实现跨域通信。
1.可以原生实现；
2.jquery ajax实现：指定dataType: ‘jsonp’
缺点：只能实现get一种请求。
（2）document.domain+iframe跨域
此方案仅限主域相同，子域不同的跨域场景。
实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
（3）location.hash+iframe跨域
实现原理：a域与b域相互通信，通过中间页c来实现。三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
（4）window.name+iframe跨域
（5）postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一。
（6）跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无需设置，若要带cookie请求，前后端都需要设置。
目前，所有浏览器都支持该功能，CORS也已经成为主流的跨域解决方案。
1.前端设置：
原生ajax、jQuery ajax、vue框架
xhr.withCredentials = true; //前端设置是否带cookie
2.服务端设置：
java后台、nodejs后台
Response.setHeader(“Access-Control-Allow-Origin”,”http://www.jinjumao.club”);
response.setHeader(“Access-Control-Allow-Credentials“，”true”);
（7）nginx代理跨域
1.nginx配置解决iconfont跨域
location / {
add_header Access-Control-Allow-Origin *;
}
2.nginx反向代理接口跨域
实现思路：通过nginx配置一个代理服务器（域名与domain1相同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。
（8）Nodejs中间件代理跨域
node中间件实现跨域代理，原理大致与nginx相同，都是启用一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。
1.非vue框架的跨域
利用node+express+http-proxy-middleware搭建一个proxy服务器。
2.vue框架的跨域
利用node+webpack+webpack-dev-server代理接口跨域。在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。
（9）WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议，它实现了浏览器与服务器全双工通信，同时允许跨域通讯。
--------------------- 作者：Gyoung阿广 来源：CSDN 原文：https://blog.csdn.net/u012755393/article/details/79885043 版权声明：本文为博主原创文章，转载请附上博文链接！