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

本篇內容主要講解“Nginx反向代理跨域基本配置方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Nginx反向代理跨域基本配置方法”吧!

nginx接口服務反向代理基本配置

server {
  listen 8443; # 監聽的端口號
  server_name a.test.com; # 服務器名稱
  client_max_body_size 100m;  # 定義讀取客戶端請求頭的超時時間
  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; # 靜態資源目錄
    index index.html index.htm;
    try_files $uri $uri/ /index.html; # 動態解析目錄，配合vue的history模式
  }
}

基本配置實現了頁面及靜態服務器的基本功能，并可以實現使用vue的history模式時的路由解析。進一步的，為了實現向接口服務器的統一轉發，我們需要和后端開發人員規定接口名的前綴，比如所有接口的相對路徑都以api開頭，此時我們可以添加如下配置(和上一個location平級)，

...
location /api {
  proxy_pass https://b.test.com; # 設置代理服務器的協議和地址
  proxy_cookie_domain b.test.com a.test.com; # 修改cookie，針對request和response互相寫入cookie
}    
...

其中主要依賴proxy_pass，實現將a.test.com下的/api/x接口轉發到了b.test.com下面，這個過程大致如下

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

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

這個實現了，a.test.com和b.test.com域名之間cookie的傳遞與回寫。

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

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

綜上nginx反向代理的本質其實就是接口服務的轉發與header的處理，仔細想想也就容易理解了。

常見誤區

1、無用的aca-header ？

網上很多的nginx跨域設置里面都加了跨域header設置相關的內容，比如

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

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

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

同樣的，在網上看到了有的網友在配置proxy_pass的時候，會在后面加一個斜杠，如下，然后說報錯啦，找不到接口啦～咋整啊～

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

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

針對這種情況，如果后端接口統一有了規定前綴，比如/api，那你這里就不要配置斜杠了。另一種情況，后端接口shit一樣，沒有統一前綴，這邊又要區分，那就在前端所有接口都加一個統一前綴，比如/api，然后通過加斜杠來替換掉好了～

到此，相信大家對“Nginx反向代理跨域基本配置方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！