版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
由于浏览器的同源策略（协议、域名和端口是否相同），我们经常需要对请求做跨域处理。
常见的跨域方式有什么呢？
- 通过jsonp跨域 （利用script、src标签发起get请求不会出现跨域禁止的特点实现）
- 通过修改document.domain来跨子域
- window.name+iframe （借助中介属性window.name实现）
- HTML5中的window.postMessage （主要侧重于前端通讯，不同域下页面之间的数据传递）
- 使用代理服务器 （Nginx反向代理）
- CORS全称是"跨域资源共享"
今天主要了解Ningx反向代理和CORS跨域。
Nginx反向代理
什么是反向代理？
- 看到一个回答很好：正反向代理
为什么要反向代理？
- 解决跨域问题。
eg: node服务运行在localhost:3000端口，vue运行在localhost:8080端口，不同端口存在跨域问题。
反向代理的具体过程是什么？
- 通过伪造请求使得http请求为同源的，然后将同源的请求发送到反向代理服务器上，由反向代理服务器去请求真正的url，这样就绕过直接请求真正的url导致跨域问题。
具体实现：
前端发起请求：
toLogin(){
this.axios.post('/api2/users/login',{
username:this.username,
password:this.password
}).then((res)=>{
console.log(res);
}).catch((res) => {
alert("错误：" + res);
});
}
前端vue.config.js里设置跨域：
proxy:{
'/api2':{
target:'http://localhost:3000',
changeOrigin:true,
}
}
即可完成跨域。
反向代理的优缺点：
优点：
- 可以实现负载均衡
- 安全性高
缺点：针对每一次代理，代理服务器就必须打开两个连接，一个对外，一个对内，因此在并发连接请求数量非常大的时候，代理服务器的负载也就非常大了，在最后代理服务器本身会成为服务的瓶颈。 - 应用场景：对连接数量不是特别大，但每次连接都需要消耗大量处理资源的站点进行负载均衡时使用。
Cors
具体实现：
前端发起请求：
toLogin(){
this.axios.post('http://localhost:3000/api2/users/login',{
username:this.username,
password:this.password
}).then((res)=>{
console.log(res);
}).catch((res) => {
alert("错误：" + res);
});
}
后台设置跨域：
app.use('/',function(req,res,next){
res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
})
即可完成跨域。
cors的优缺点：
- 优点：
1.使用简单，只需要在后端做配置。
2.支持所有类型的http请求，不像jsonp只支持get。
3.cors可以通过onerror事件监听错误，并且浏览器控制台会看到报错信息，利于查错。 - 缺点：cors对于IE8以下的浏览器是不支持的。
- 应用场景：需要对服务端资源进行写操作。
参数的含义：
-
Access-Control-Allow-Origin
- 必须要写。
- 表示哪些客户端的域名的请求可以接受。
- 值有两种形式：
- '*'表示任何域名
- Origin字段的具体值
-
Access-Control-Allow-Methods
- 必须要写。
- 表示服务器支持的请求类型（get、post）
-
Access-Control-Expose-Headers（很少用到）
- 可以不写
- cors请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
-
Access-Control-Allow-Credentials
- 可以不写
- 表示是否允许发送cookie，true表示允许，默认为false
- 有的情况下浏览器会不征询服务器的意见而强行发送（请求方法是PUT或DELETE），或者有的字段只能设置为true（ontent-Type字段的类型是application/json），但我们又不想要它发送cookie时，删除该字段即可。
-
Access-Control-Max-Age
- 可以不写
- 用来指定本次预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求。
注意：cors请求发送Cookie时，Access-Control-Allow-Origin只能是与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。