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

很差意思又来炒冷饭了。。。请拿简从来砸我。。。蚂蚁金服-芝麻信用招人啦 前端P6/7，岗位JD参考，名额有限，快来人啊。。。

---

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

---

1、前端配置

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反向代理：此时前端至关于不跨域，和正常请求一致，无需额外配置。

2、后端配置

CORS方案： 对于简单请求后端须要包装ACA系列header，

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

而对于复杂跨域请求，则还须要处理一步预检的流程。

Nginx反向代理：此时后端至关于不跨域，和正常请求一致，无需额外配置。

3、服务器配置

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
}       
...
复制代码

原理能够看下前面两篇文章

4、安全性

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

5、移植灵活性、扩展性

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做为接口服务器的入口，尽可能不要暴露到外面，以避免出现没必要要的安全问题。

---

emmm最近咱们还在招人了，蚂蚁金服-芝麻信用招前端P6/7！机会可贵！加油啊！你能够的！，大厂你懂的，奖金分你一半啊，感兴趣的快来试试吧，有兴趣微信聊聊的加我哈heiohiio，简历直接丢我邮箱也能够啊～heioray@sina.com

---

～本篇完～欢迎你们一块儿讨论～