解决跨域: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。

你可能感兴趣的:(web)