成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CORS跨域與Nginx反向代理跨域優(yōu)劣對(duì)比

yiliang / 2972人閱讀

摘要：最近寫了一些關(guān)于前后端分離項(xiàng)目之后，跨域相關(guān)方案的基本原理和常見誤區(qū)的帖子，主要包括和反向代理。反向代理此時(shí)后端相當(dāng)于不跨域，和正常請(qǐng)求一致，無(wú)需額外配置。

最近寫了一些關(guān)于前后端分離項(xiàng)目之后，跨域相關(guān)方案的基本原理和常見誤區(qū)的帖子，主要包括CORS和Nginx反向代理。這兩種方案項(xiàng)目中都有在用，各有優(yōu)缺，關(guān)于具體使用哪種方案，大家的觀點(diǎn)也不大一致，本文主要就此展開一下，從前后端及服務(wù)器配置、安全性、移植靈活性、擴(kuò)展性等方面詳細(xì)對(duì)比一下兩種方案的優(yōu)缺，以便于后期在方案選型上對(duì)大家有所幫助。

前端配置

CORS方案：跨域時(shí)部分瀏覽器默認(rèn)不攜帶cookie，因此為了攜帶cookie需要設(shè)置一下xmlhttprequest的withCrendetails屬性，使用vue-resouce時(shí)設(shè)置如下

Vue.http.options.credentials = true

用axios時(shí)，可以在攔截器中設(shè)置如下

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

使用原生XMLHttpRequest對(duì)象時(shí)如下，

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

如果不需要傳遞cookie，最好置成false，避免不嗯瀏覽器默認(rèn)允許cookie的攜帶。
Nginx反向代理：此時(shí)前端相當(dāng)于不跨域，和正常請(qǐng)求一致，無(wú)需額外配置。

后端配置

CORS方案： 后端需要包裝ACA系列header，

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

除此以外無(wú)需額外配置。
Nginx反向代理：此時(shí)后端相當(dāng)于不跨域，和正常請(qǐng)求一致，無(wú)需額外配置。

服務(wù)器配置

CORS方案： 無(wú)。
Nginx反向代理：該方案跨域工作都集中在nginx服務(wù)器上，配置如下

...
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; # 設(shè)置代理服務(wù)器的協(xié)議和地址
   proxy_cookie_domain b.test.com  a.test.com; # 修改cookie，針對(duì)request和response互相寫入cookie
}       
...

原理移步nginx反向代理跨域基本配置與常見誤區(qū)、nginx配置解析之客戶端真實(shí)IP的傳遞

安全性

CORS方案： 由于此時(shí)瀏覽器會(huì)默認(rèn)添加origin屬性，服務(wù)端可以直接查到請(qǐng)求來(lái)源，便于控制來(lái)源、屏蔽黑名單鏈接。同時(shí)服務(wù)端域名和端口會(huì)暴露出來(lái)。
Nginx反向代理：反向代理方案中沒(méi)有默認(rèn)的origin頭部可以使用，但是可以通過(guò)X-Forward-For頭部查看客戶端及各級(jí)代理ip，也可以實(shí)現(xiàn)一定程度的回溯追蹤和黑名單屏蔽。由于反向代理中，可以采用內(nèi)網(wǎng)地址訪問(wèn)接口服務(wù)器，這樣可以一定程度上保護(hù)接口服務(wù)器不暴露出來(lái)。

移植靈活性、擴(kuò)展性

CORS方案： 只需要在代碼或者配置中心進(jìn)行黑白名單配置即可，方便移植和擴(kuò)展。
Nginx反向代理：不同環(huán)境服務(wù)域名可能不一致，因此nginx配置也各不相同，不便于移植。而對(duì)于擴(kuò)展性，當(dāng)存在新的項(xiàng)目需要訪問(wèn)接口服務(wù)器時(shí)，需要首先訪問(wèn)nginx中server指定的域名，再由server域名反向代理到接口服務(wù)器，比如

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

這個(gè)時(shí)候跨域模型就變了，由單純的a.test.com反向代理到b.test.com，變成了a.test.com反向代理到b.test.com以及c.test.comCORS到a.test.com再反向代理到b.test.comd的情況。這個(gè)有點(diǎn)繞，但仔細(xì)想一下就會(huì)明白。這無(wú)疑增加了后期的維護(hù)成本。

綜合對(duì)比

綜合以上，我們大致可以得到如下圖標(biāo)

Item CORS Nginx反向代理
代碼配置--前端 credentials=true 無(wú)
代碼配置--后臺(tái) setHeader:ACA-Origin、ACA-Method、ACA-Credentials等 無(wú)
服務(wù)器配置 無(wú) Nginx配置
移植靈活性 高、無(wú)需額外配置 低、每套環(huán)境配置可能均不相同
安全性 來(lái)源可控、直接追溯 X-Forwarded-For追溯多級(jí)來(lái)源
新項(xiàng)目擴(kuò)展 黑白名單控制 更新配置，跨域模型會(huì)產(chǎn)生變化
對(duì)比結(jié)論

綜上呢，對(duì)于公共基礎(chǔ)服務(wù)，由于涉及到對(duì)接的前端項(xiàng)目可能比較多，開發(fā)測(cè)試部署環(huán)境也比較多，整體上來(lái)講我更傾向于推薦大家使用CORS方案。而對(duì)于一些對(duì)立性強(qiáng)的小項(xiàng)目，使用nginx則可以降低你的開發(fā)成本，快速發(fā)開快速上線。具體使用當(dāng)然也要結(jié)合工作實(shí)際，按需使用吧。
此外對(duì)于Nginx反向代理方案使用時(shí)，推薦使用內(nèi)部域名/ip作為接口服務(wù)器的入口，盡量不要暴露到外面，以免出現(xiàn)不必要的安全問(wèn)題。

～本篇完～歡迎大家一起討論～

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/40097.html

相關(guān)文章

  • 徹底弄懂跨域問(wèn)題

    摘要：用于告知瀏覽器可以將預(yù)先檢查請(qǐng)求返回結(jié)果緩存的時(shí)間，在緩存有效期內(nèi)，瀏覽器會(huì)使用緩存的預(yù)先檢查結(jié)果判斷是否發(fā)送跨域請(qǐng)求。 跨域，老生常談的問(wèn)題 簡(jiǎn)述 作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來(lái)越近，就算是菜鳥也要猛振翅膀。近幾日仔細(xì)研究了跨域問(wèn)題，寫下這篇文章，希望對(duì)開發(fā)者們有所幫助。在讀本文前，希望您對(duì)以下知識(shí)略有了解。 瀏覽器同源策略 n...

    rose 評(píng)論0 收藏0

  • 徹底弄懂跨域問(wèn)題

    摘要：瀏覽器同源策略我們?yōu)楹我芯靠缬騿?wèn)題因?yàn)闉g覽器的同源策略規(guī)定某域下的客戶端在沒(méi)明確授權(quán)的情況下，不能讀寫另一個(gè)域的資源。 跨域，老生常談的問(wèn)題 簡(jiǎn)述 作為一只前端菜鳥，跨域方面只懂得JSONP和CORS，并未曾深入了解。但隨著春招越來(lái)越近，就算是菜鳥也要猛振翅膀。近幾日仔細(xì)研究了跨域問(wèn)題，寫下這篇文章，希望對(duì)開發(fā)者們有所幫助。在讀本文前，希望您對(duì)以下知識(shí)略有了解。 瀏覽器同源策略 n...

    CoorChice 評(píng)論0 收藏0

  • 利用Nginx反向代理解決跨域問(wèn)題

    摘要：反向代理服務(wù)器對(duì)于客戶端而言它就像是原始服務(wù)器，并且客戶端不需要進(jìn)行任何特別的設(shè)置。使用反向代理可能訪問(wèn)網(wǎng)頁(yè)相對(duì)于之前響應(yīng)會(huì)比較慢 標(biāo)簽： Nginx,跨域 問(wèn)題 在之前的分享的跨域資源共享的文章中，有提到要注意跨域時(shí)，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為*，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。在此次項(xiàng)目開發(fā)中與他人協(xié)作中就遇到...

    EscapedDog 評(píng)論0 收藏0

  • 利用Nginx反向代理解決跨域問(wèn)題

    摘要：反向代理服務(wù)器對(duì)于客戶端而言它就像是原始服務(wù)器，并且客戶端不需要進(jìn)行任何特別的設(shè)置。使用反向代理可能訪問(wèn)網(wǎng)頁(yè)相對(duì)于之前響應(yīng)會(huì)比較慢 標(biāo)簽： Nginx,跨域 問(wèn)題 在之前的分享的跨域資源共享的文章中，有提到要注意跨域時(shí)，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為*，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。在此次項(xiàng)目開發(fā)中與他人協(xié)作中就遇到...

    YanceyOfficial 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<