九种方法解决前端跨域
原文章地址：segmentfault.com/a/119000001… 本文主要是参考原文章内容，如想了解更多，请移步原文地址。为什么会出现跨域 跨域是浏览器的同源策略导致的，那么什么是同源策略呢？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。什么情况下会出现跨域 【九种方法解决前端跨域】以下是会出现跨域的情况
// 协议不同
http://www.test.com:8080
https://www.test.com:8080
// 域名不同
http://www.test.com:8080
http://www.tester.com:8080
// 域名相同，端口不同
http://www.test.com:8080
http://www.test.com:8081
// 主域名相同，子域名不同
http://www.a.test.com:8080
http://www.b.test.com:8080
// 域名和域名对应相同ip
http://www.test.com:8080
http://192.12.23.18:8080
复制代码以下为不存在跨域的情况
// 相同的协议+域名+端口下的不同文件之间不存在跨域
http://www.test.com:8080/a.js
http://www.test.com:8080/b.js
复制代码跨域是浏览器禁止的，服务器并不禁止跨域。所以浏览器可以发给自己的服务器端，然后由自己的服务器再转发给要跨域的服务端。做一层代理。
一、CORS 以前我们常用的CORS，作为一个最为普通的解决跨域的方式。如果只是单纯的解决跨域只需要后端设置Access-Control-Allow-Origin即可，但是如果请求需要带cookie，就必须前端设置了。
需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：七、nginx反向代理中设置proxy_cookie_domain 和 八、NodeJs中间件代理中cookieDomainRewrite参数的设置。 目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案前端设置：
原生ajax
var xhr = new XMLHttpRequest();
// IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.test.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
复制代码jQuery ajax
$.ajax({
...
xhrFields: {
withCredentials: true// 前端设置是否带cookie
},
crossDomain: true,// 会让请求头中包含跨域的额外信息，但不会含cookie
...
});
复制代码vue框架 axios设置：
axios.defaults.withCredentials = true
复制代码vue-resource设置：
Vue.http.options.credentials = true
复制代码后端设置 JAVA
/*
* 导入包：import javax.servlet.http.HttpServletResponse;
* 接口参数中定义：HttpServletResponse response
*/// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.test.com");
// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true");
// 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
复制代码二、JSONP 使用JSONP处理跨域其实是最简单的一种方式。JSONP是在文档中插入一个script标签。创建callback方法，数据请求通过callback接收和处理。通过服务器配合执行callback方法，并传入一些参数，
JSONP只支持GET请求原生实现【动态创建script标签】
复制代码Ajax
$.ajax({
url: 'http://',
type: 'get',
dataType: 'jsonp',
jsonpCallback: 'callBack',
data: {},
complete: function(res){
}
})
复制代码Vue
this.$http.jsonp(url, {
params: {},
jsonp: 'callBack'
}).then((res) => {})
复制代码三、postMessage postMessage我们在上一篇中已经讲过了，postMessage是HTML5中新提供的API，用来处理多窗口跨域消息传递是非常方便的。 主要解决的问题有：
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的iframe消息传递
- 上面三个场景的跨域数据传递
总之就是使用它可以很好的解决跨域问题，这个主要是解决页面与页面的跨域消息传递，而不是和服务端交互的。具体的使用方法可以看postMessage到底有多好用
四、nginx 前面我们说过了，是浏览器的同源策略才导致存在跨域问题，那我们在数据请求的时候首先访问我们本地，然后在接口发出去的时候做一个代理转发。就可以实现跨域了。 使用nginx我们可以轻松实现跨域。使用nginx实现跨域主要应用在前端开发时，或者部署时使用的nginx启服务的情况。 简单看一下nginx的配置
#proxy服务器
server {
listen80;
server_namewww.test.com;
location /apis { #添加访问目录为/apis的代理配置
proxy_passhttp://www.tester.com:8080;
#反向代理
proxy_cookie_domain www.tester.com www.domainA.com;
#修改cookie里域名
indexindex.html index.htm;
# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
add_header Access-Control-Allow-Origin http://www.domain1.com;
#当前端只跨域不带cookie时，可为*
add_header Access-Control-Allow-Credentials true;
}
}
复制代码注意这里的/api，表示只有目录为/apis下才做代理转发。其他的还是保持原有的请求地址。 具体nginx的安装和使用方法参考nginx介绍及mac中如何使用五、nodejs中间件代理跨域 Nodejs中间件代理跨域主要使用的是http-proxy-middleware中间件，其实我们用过的人都知道，这个中间件我们可以在不同的地方使用实现相同的效果，
- 使用node启动服务，在node启动中使用，
var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/', proxy({
// 代理跨域目标接口
target: 'http://www.test.com:8080',
changeOrigin: true,
}));
app.listen(3000);
复制代码- 在webpack的配置中使用。webpack-dev-server中配置proxy。webpack-dev-server使用http-proxy-middleware去把请求代理到一个外部的服务器，配置的样例如下：
var webpack = require('webpack');
module.exports = {
....
devServer: {
port: '8088', //设置端口号
//其实很简单的，只要配置这个参数就可以了
proxy: {
'/apis': {
target: 'http://test.com:8080',
secure: false
}
}
}
....
};
复制代码- vue-cli的proxyTable内部使用的是http-proxy-middleware中间件 webpack.config.js部分配置：
proxyTable: {
'/apis': {
target: 'http://test.com:8080',
changeOrigin: true,
secure: false
}
},
复制代码这三种实现方式，其实都是借助了http-proxy-middleware中间件实现的。
六、WebSocket协议跨域 WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，允许服务端主动向客户端推送数据，同时允许跨域通讯，是server push技术的一种很好的实现。
目前我们常用的http请求必须要客户端主动发送请求给服务端，服务端才会给出相应的答复。服务端是不会主动发送信息给客户端的，那么WebSocket就解决了这个问题，常见的案例是使用WebSocket进行实时数据刷新。
// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function (event) {
console.log('Message from server ', event.data);
});
复制代码七、document.domain + iframe跨域 这种场景主要是主域相同，子域不同的情况 例如
http://www.test.com:8080
http://www.b.test.com:8080
复制代码实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。 主域页面 www.test.com:8080/index.html
复制代码子域页面 www.b.test.com:8080/b.html
复制代码八、location.hash + iframe跨域 实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。
- a.html
复制代码- b.html
复制代码- c.html
复制代码九、window.name + iframe跨域 window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）
var proxy = function(url, callback) {
var state = 0;
var iframe = document.createElement('iframe');
// 加载跨域页面
iframe.src = https://www.it610.com/article/url;
// onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
iframe.onload = function() {
if (state === 1) {
// 第2次onload(同域proxy页)成功后，读取同域window.name中数据
callback(iframe.contentWindow.name);
destoryFrame();
} else if (state === 0) {
// 第1次onload(跨域页)成功后，切换到同域代理页面
iframe.contentWindow.location ='http://www.domain1.com/proxy.html';
state = 1;
}
};
document.body.appendChild(iframe);
// 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
function destoryFrame() {
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
}
};
// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
alert(data);
});
复制代码2.）proxy.html：(www.test.com/proxy.... 中间代理页，与a.html同域，内容为空即可。
3.）b.html：(www.test.com/b.html)
复制代码通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。
总结 这么多处理跨域的方式中。现在比较常见的处理跨域的方式是使用nginx或者nodejs代理，如果你只是一些简单的操作可以使用jsonp，根据自己的需求选择不同的解决办法。
转载于:https://juejin.im/post/5c41bdae6fb9a04a053ff825
推荐阅读
- parallels|parallels desktop 解决网络初始化失败问题
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- 对抗抑郁最好的方法
- 怎样用黑谜速冻膜去黑头，|怎样用黑谜速冻膜去黑头， 最有效的去黑头的方法看这!
- SpringBoot调用公共模块的自定义注解失效的解决
- 解决SpringBoot引用别的模块无法注入的问题
- 移动端h5调试方法
- 唱歌教学（导致嗓音损坏的几个常见的错误唱歌方法！）
- 拆书方法训练营