龙空技术网

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

香港IDC 311

前言:

当前兄弟们对“nginx反向代理cors”大体比较关切,你们都需要了解一些“nginx反向代理cors”的相关内容。那么小编同时在网上网罗了一些对于“nginx反向代理cors””的相关文章,希望你们能喜欢,你们一起来学习一下吧!

最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括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 ; # 设置代理服务器的协议和地址  proxy_cookie_domain b.test.com a.test.com; # 修改cookie,针对request和response互相写入cookie } ... 

安全性

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 ; #反向代理  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的情况。这个有点绕,但仔细想一下就会明白。这无疑增加了后期的维护成本。

综合对比

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

对比结论

综上呢,对于公共基础服务,由于涉及到对接的前端项目可能比较多,开发测试部署环境也比较多,整体上来讲我更倾向于推荐大家使用CORS方案。而对于一些对立性强的小项目,使用nginx则可以降低你的开发成本,快速发开快速上线。具体使用当然也要结合工作实际,按需使用吧。

此外对于Nginx反向代理方案使用时,推荐使用内部域名/ip作为接口服务器的入口,尽量不要暴露到外面,以免出现不必要的安全问题。

天下数据是国内屈指可数的拥有多处海外自建机房的新型IDC服务商,被业界公认为“中国IDC行业首选品牌”。

天下数据与全球近120多个国家顶级机房直接合作,提供包括香港、美国、韩国、日本、台湾、新加坡、荷兰、法国、英国、德国、埃及、南非、巴西、印度、越南等国家和地区的服务器、云服务器的租用服务.

除提供传统的IDC产品外,天下数据的主要职责是为大中型企业提供更精细、安全、满足个性需求的定制化服务器解决方案,特别是在直销、金融、视频、流媒体、游戏、电子商务、区块链、快消、物联网、大数据等诸多行业,为广大客户解决服务器租用中遇到的各种问题。

标签: #nginx反向代理cors