阅读 2064

CORS和Nginx反向代理解决跨域的对比

CORS

cors的基本思想就是通过请求头来让浏览器和服务器进行沟通,从而确定请求是否能够成功

在一些情况下我们发送正式的请求之前会有一个预检请求,使用options这个请求方法发送,用来获取服务器允许的请求头的格式,涉及如下的请求头:

Origin

表示跨域请求来自哪里

Access-Control-Request-Method

表示请求可能用到的方法是什么 GET、POST、PUT ...

Access-Control-Request-Headers

请求时可能用到的头部

响应头基本和请求头对应,包括:

Access-Control-Allow-Origin

表明服务器接受的跨域请求的原地址包含哪些,如果请求头的origin和该字段设置的不匹配则不允许跨域,*表示任何请求都可访问

Access-Control-Allow-Credentials

表明请求是否要携带cookie,如果设置为false但是浏览器传过来了cookie,浏览器会调用到onerror事件处理程序。 如果是 fetch 请求,该值设置为 include,表示不论是不是跨域的请求,总是发送请求资源域在本地的 cookies、 HTTP Basic authentication 等验证信息.

Access-Control-Allow-Headers

表示跨域支持的请求头有哪些

另外还有 Access-Control-Allow-Methods | Access-Control-Max-Age等分别表示跨域支持的方法和预请求可以缓存的时间

Nginx

通过反向代理,使得请求地址和服务器同域,此时前端相当于不跨域。

二者比较

1. 前端配置

cors: 为了携带cookie我们需要设置withCredentials为true

nginx反向代理: 此时前端相当于不跨域,和正常请求一致,无需额外配置

2. 后端配置

cors: 设置A-C-A系列的header,比如:

'Access-Control-Allow-Origin' '*';
'Access-Control-Allow-Credentials' "true"; 
'Access-Control-Allow-Headers' 'X-Requested-With';
复制代码

nginx反向代理: 后端相当于不跨域,无需额外配置

3. 服务器配置

cors:

nginx反向代理: 该方案的解决主要集中在服务器配置上,比如

...
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Real-Port $remote_port;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
...
location /api {
   proxy_pass https://b.test.com; # 设置代理服务器的协议和地址
   proxy_cookie_domain b.test.com  a.test.com; # 修改cookie,针对request和response互相写入cookie
}       
...
复制代码

4. 安全性

cors: 此时浏览器会默认添加origin属性,服务端可以查询到请求来源,便于控制来源、屏蔽黑名单链接,但与此同时服务端域名和端口会暴露出来

nginx: 反向代理方案中没有默认的origin的头部可以使用,但是也可通过X-Forward-For头部来查看客户端和各级代理ip,从而实现一定程度的回溯追踪和黑名单屏蔽。由于反向代理中,可以采用内网地址访问接口服务器,这样可以一定程度上保护接口服务器不暴露出来。

5. 可移植性、扩展性

cors: 只需要配置相应的头部即可,扩展性就不多说了,需要限制就加一层条件,不需要限制就取消,可移植性你可以理解为你自己不会跨域,然后从网上某博客搜了一下然后copy一下无需任何修改就可使用,我相信这下你知道可移植性好不好了😎

nginx: 根据服务器的域名不同从而修改代理的位置,另外还有代理服务器端口是否被占用等需要根据不同服务环境进行修改的地方,另外如果配置复杂无疑会增加后期的维护成本。


server { 
    listen       8443;
    server_name  a.test.com;    
    client_max_body_size            100m;
        
    ssl ...

    location /micro{
        proxy_pass   https://b.test.com;  #反向代理
        proxy_cookie_domain b.test.com a.test.com; #修改cookie
        add_header 'Access-Control-Allow-Origin' 'htps://c.test.com';
        add_header 'Access-Control-Allow-Credentials' "true"; 
        add_header Access-Control-Allow-Headers X-Requested-With;
    }
}

复制代码

上面的代理模型就是 a.test.com反向代理到b.test.com ,

然后c.test.com cors到a.test.com 再反向代理到b.test.com

总结

CORSnginx
前端withCredential = true
后端A-C-A headers
服务器nginx配置
移植性好,无需额外配置稍差,根据不同环境来进行相应配置
安全性来源可控,直接追溯通过X-Forward-For追溯多级来源
扩展性黑白名单控制更新配置跨域模型会产生变化

参考

简单对比一下CORS跨域与Nginx反向代理跨域优劣

文章分类
前端
文章标签