CORS跨域与Nginx反向代理跨域优劣对比

最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理。这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主要就此展开一下,从前后端及服务器配置、安全性、移植灵活性、扩展性等方面详细对比一下两种方案的优缺,以便于后期在方案选型上对大家有所帮助。


前端配置

CORS方案:跨域时部分浏览器默认不携带cookie,因此为了携带cookie需要设置一下xmlhttprequest的withCrendetails属性,使用vue-resouce时设置如下

Vue.http.options.credentials = true

用axios时,可以在拦截器中设置如下

axios.interceptors.request.use((config) => {
    config.withCredentials = true
    return config
}, (error) => {
    return Promise.reject(error)
})

使用原生XMLHttpRequest对象时如下,

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

如果不需要传递cookie,最好置成false,避免不嗯浏览器默认允许cookie的携带。 Nginx反向代理:此时前端相当于不跨域,和正常请求一致,无需额外配置。

后端配置

CORS方案: 后端需要包装ACA系列header,

'Access-Control-Allow-Origin' '*';
'Access-Control-Allow-Credentials' "true"; 
'Access-Control-Allow-Headers' 'X-Requested-With';

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

服务器配置

CORS方案: 无。 Nginx反向代理:该方案跨域工作都集中在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
}       
...

原理移步nginx反向代理跨域基本配置与常见误区nginx配置解析之客户端真实IP的传递

安全性

CORS方案: 由于此时浏览器会默认添加origin属性,服务端可以直接查到请求来源,便于控制来源、屏蔽黑名单链接。同时服务端域名和端口会暴露出来。 Nginx反向代理:反向代理方案中没有默认的origin头部可以使用,但是可以通过X-Forward-For头部查看客户端及各级代理ip,也可以实现一定程度的回溯追踪和黑名单屏蔽。由于反向代理中,可以采用内网地址访问接口服务器,这样可以一定程度上保护接口服务器不暴露出来。

移植灵活性、扩展性

CORS方案: 只需要在代码或者配置中心进行黑白名单配置即可,方便移植和扩展。 Nginx反向代理:不同环境服务域名可能不一致,因此nginx配置也各不相同,不便于移植。而对于扩展性,当存在新的项目需要访问接口服务器时,需要首先访问nginx中server指定的域名,再由server域名反向代理到接口服务器,比如

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,变成了a.test.com反向代理到b.test.com以及c.test.comCORS到a.test.com再反向代理到b.test.comd的情况。这个有点绕,但仔细想一下就会明白。这无疑增加了后期的维护成本。

综合对比

综合以上,我们大致可以得到如下图标

Item

CORS

Nginx反向代理

代码配置--前端

credentials=true

代码配置--后台

setHeader:ACA-Origin、ACA-Method、ACA-Credentials等

服务器配置

Nginx配置

移植灵活性

高、无需额外配置

低、每套环境配置可能均不相同

安全性

来源可控、直接追溯

X-Forwarded-For追溯多级来源

新项目扩展

黑白名单控制

更新配置,跨域模型会产生变化

对比结论

综上呢,对于公共基础服务,由于涉及到对接的前端项目可能比较多,开发测试部署环境也比较多,整体上来讲我更倾向于推荐大家使用CORS方案。而对于一些对立性强的小项目,使用nginx则可以降低你的开发成本,快速发开快速上线。具体使用当然也要结合工作实际,按需使用吧。 此外对于Nginx反向代理方案使用时,推荐使用内部域名/ip作为接口服务器的入口,尽量不要暴露到外面,以免出现不必要的安全问题。

~本篇完~欢迎大家一起讨论~

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1x3cwnkiebkl8

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web项目聚集地

MyBatis-逆向工程「Generator使用指南」

当你利用搜索引擎搜索Maven会出来很多名词:对象模型、标准集合、依赖管理系统这是啥啊?差不多得你会用了Maven才会理解这些名称吧,我找到了一个博主的博客

20420
来自专栏有困难要上,没有困难创造困难也要上!

Mac上启动Apache服务

34440
来自专栏石奈子的Java之路

原 Intellij IDEA必要条件

17250
来自专栏陈树义

如何在IntelJ下用Maven创建一个Web项目

相信一开始做Web项目的同学都是直接把项目包放在WEB-INF/lib目录下,然后就开始做项目了。但是之后接触了一些使用了Maven进行包管理的项目,我们就不得...

28360
来自专栏懒人开发

bpkg工具

最近接手一个项目 本来是jenkinsfile相关, 但是由于这里很多实现都是用的shell 并且还是用的 bpkg 做的管理, 再在bpkg基础上, 写了...

19230
来自专栏技术支持log

新购腾讯云 coreOS 系统服务器一段时间后无法登陆原因

问题现象: 新购coreOS刚开始可以正常远程登陆,但是过一段时间后就无法远程登陆了,如果有留意会发现在登陆系统10分钟左右后窗口会弹出下列信息,通知了系统会...

34810
来自专栏xingoo, 一个梦想做发明家的程序员

Tomcat6.0 管理器配置

最近忙着毕业答辩,填写材料,好多事情都给耽搁了!一个月都没有继续翻译tomcat,这回有点时间赶紧补上。 这部分,其实对开发者或者tomcat管理者来说,只...

22970
来自专栏散尽浮华

针对负载均衡集群中的session解决方案的总结

在日常运维工作中,当给Web站点使用负载均衡之后,必须面临的一个重要问题就是Session的处理办法,无论是PHP、Python、Ruby还是Java语言环境,...

240110
来自专栏菩提树下的杨过

dubbox 的各种管理和监管

dubbo官方自带了dubbo-admin及dubbo-simple/dubbo-monitor-simple二个子项目用于服务治理及服务监控。  一、dubb...

349100
来自专栏枕边书

Linux - 请允许我静静地后台运行

前言 常在 linux 下玩耍的开发者肯定会经常遇到需要对进程调度的情况,在 windows 中点击 最小化 去干别的就 OK 了,那么在 linux 下怎么办...

27550

扫码关注云+社区

领取腾讯云代金券