解决跨域：Cors跨域与Nginx反向代理的区别

由于浏览器的同源策略（协议、域名和端口是否相同），我们经常需要对请求做跨域处理。

常见的跨域方式有什么呢？

• 通过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

  • 必须要写。
  • 表示哪些客户端的域名的请求可以接受。
  • 值有两种形式：
    1. '*'表示任何域名
    2. 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。