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

本篇內(nèi)容主要講解“Nginx反向代理跨域基本配置方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Nginx反向代理跨域基本配置方法”吧!

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、肥鄉(xiāng)網(wǎng)絡(luò)推廣、小程序開(kāi)發(fā)、肥鄉(xiāng)網(wǎng)絡(luò)營(yíng)銷、肥鄉(xiāng)企業(yè)策劃、肥鄉(xiāng)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供肥鄉(xiāng)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：muchs.cn

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

server {
  listen 8443; # 監(jiān)聽(tīng)的端口號(hào)
  server_name a.test.com; # 服務(wù)器名稱
  client_max_body_size 100m;  # 定義讀取客戶端請(qǐng)求頭的超時(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; # 動(dòng)態(tài)解析目錄，配合vue的history模式
  }
}

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

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

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

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來(lái)模擬一下的話，大致如下

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ì)想想也就容易理解了。

常見(jiàn)誤區(qū)

1、無(wú)用的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;

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

2、proxy_pass 域名帶不帶‘斜杠/' ？

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

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

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

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

到此，相信大家對(duì)“Nginx反向代理跨域基本配置方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章名稱：Nginx反向代理跨域基本配置方法
當(dāng)前網(wǎng)址：http://muchs.cn/article26/gceecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站改版、、面包屑導(dǎo)航、標(biāo)簽優(yōu)化、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)