Nginx反向代理跨域基本配置方法

nginx接口服務(wù)反向代理基本配置

server?{ ??listen?8443;?#?監(jiān)聽的端口號 ??server_name?a.test.com;?#?服務(wù)器名稱 ??client_max_body_size?100m;??#?定義讀取客戶端請求頭的超時(shí)時(shí)間 ??ssl?on; ??ssl_certificate?test.pem; ??ssl_certificate_key?test.key; ??ssl_session_timeout?5m; ??ssl_protocols?sslv3?tlsv1.2; ??ssl_ciphers?ecdhe-rsa-aes256-sha384:aes256-sha256:rc4:high:!md5:!anull:!enull:!null:!dh:!edh:!aesgcm; ??ssl_prefer_server_ciphers?on; ??location?/?{ ????root?/test-static-app;?#?靜態(tài)資源目錄 ????index?index.html?index.htm; ????try_files?$uri?$uri/?/index.html;?#?動態(tài)解析目錄,配合vue的history模式 ??} }

基本配置實(shí)現(xiàn)了頁面及靜態(tài)服務(wù)器的基本功能,并可以實(shí)現(xiàn)使用vue的history模式時(shí)的路由解析。進(jìn)一步的,為了實(shí)現(xiàn)向接口服務(wù)器的統(tǒng)一轉(zhuǎn)發(fā),我們需要和后端開發(fā)人員規(guī)定接口名的前綴,比如所有接口的相對路徑都以api開頭,此時(shí)我們可以添加如下配置(和上一個(gè)location平級),

... location?/api?{ ??proxy_pass?https://b.test.com;?#?設(shè)置代理服務(wù)器的協(xié)議和地址 ??proxy_Cookie_domain?b.test.com?a.test.com;?#?修改cookie,針對request和response互相寫入cookie }???? ...

其中主要依賴proxy_pass,實(shí)現(xiàn)將a.test.com下的/api/x接口轉(zhuǎn)發(fā)到了b.test.com下面,這個(gè)過程大致如下

Nginx反向代理跨域基本配置方法

cookie的交互主要就是proxy_cookie_domain,加上下面這段

proxy_cookie_domain?b.test.com?a.test.com;

這個(gè)實(shí)現(xiàn)了,a.test.com和b.test.com域名之間cookie的傳遞與回寫。

如果用node來模擬一下的話,大致如下

module.exports?=?(router)?=>?{ ?router.get('/api/index/getcmsinfo',?async?function?(ctx,?next)?{ ??//?接口轉(zhuǎn)發(fā) ??let?result?=?await?superagent.post('https://b.test.com/api/card/home').set(browsermsg) ??//?獲取返回的set-cookie,并設(shè)置header ??let?setcookie?=?result.headers['set-cookie'] ??if?(setcookie)?{ ????ctx.response.header['set-cookie']?=?setcookie ??} ??//?返回 ??ctx.response.body={ ????success:?true, ????result:?result.body? ??} ?}) }

綜上nginx反向代理的本質(zhì)其實(shí)就是接口服務(wù)的轉(zhuǎn)發(fā)與header的處理,仔細(xì)想想也就容易理解了。

常見誤區(qū)

1、無用的aca-header ?

網(wǎng)上很多的nginx跨域設(shè)置里面都加了跨域header設(shè)置相關(guān)的內(nèi)容,比如

add_header?'Access-control-allow-origin'?'*'; add_header?'access-control-allow-credentials'?"true";? add_header?access-control-allow-headers?x-requested-with;

想想上面的原理,各位看官覺得這個(gè)還有用么?aca(access-control-allow-)系列的header本身是為了cors中做協(xié)商跨域而配置的,在這里配這個(gè)純屬脫褲子放屁多此一舉。

2、proxy_pass 域名帶不帶‘斜杠/’ ?

同樣的,在網(wǎng)上看到了有的網(wǎng)友在配置proxy_pass的時(shí)候,會在后面加一個(gè)斜杠,如下,然后說報(bào)錯(cuò)啦,找不到接口啦~咋整啊~

... location?/api?{ ??#proxy_pass?https://b.test.com; ??proxy_pass?https://b.test.com/; }???? ...

看到這個(gè)我們來想一想哈,proxy_pass的作用是抓發(fā),加了斜杠意味著所有的/api請求都會轉(zhuǎn)發(fā)到根目錄下,也就是說 /api 會被 / 替代,這個(gè)時(shí)候接口路徑就變了,少了一層/api。而不加斜杠的時(shí)候呢?這代表著轉(zhuǎn)發(fā)到b.test.com 的域名下,/api的路徑不會丟失。

針對這種情況,如果后端接口統(tǒng)一有了規(guī)定前綴,比如/api,那你這里就不要配置斜杠了。另一種情況,后端接口shit一樣,沒有統(tǒng)一前綴,這邊又要區(qū)分,那就在前端所有接口都加一個(gè)統(tǒng)一前綴,比如/api,然后通過加斜杠來替換掉好了~

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊9 分享