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 
}        
... 

安详性

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的环境。这个有点绕，但细心想一下就会大白。这无疑增进了后期的维护本钱。

综合比拟

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!