跨域是指a頁面想獲取b頁面資源，如果a、b頁面的協(xié)議、域名、端口、子域名不同，所進(jìn)行的訪問行動都是跨域的，而瀏覽器為了安全問題一般都限制了跨域訪問，也就是不允許跨域請求資源。注意：跨域限制訪問，其實是瀏覽器的限制。理解這一點很重要！！！

最近公司前后端分離，前端獨立提供頁面和靜態(tài)服務(wù)很自然的就想到了用nginx去做靜態(tài)服務(wù)器。同時由于跨域了，就想利用nginx的反向代理去處理一下跨域，但是在解決問題的同時，發(fā)現(xiàn)網(wǎng)上有些方案的確是存在一些問題，在這里總結(jié)一下基本配置，也聊一下常見的配置問題。

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

server {  listen 8443; # 監(jiān)聽的端口號  server_name a.test.com; # 服務(wù)器名稱  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; # 靜態(tài)資源目錄    index index.html index.htm;    try_files $uri $uri/ /index.html; # 動態(tài)解析目錄，配合vue的history模式  }}

基本配置實現(xiàn)了頁面及靜態(tài)服務(wù)器的基本功能，并可以實現(xiàn)使用vue的history模式時的路由解析。進(jìn)一步的，為了實現(xiàn)向接口服務(wù)器的統(tǒng)一轉(zhuǎn)發(fā)，我們需要和后端開發(fā)人員規(guī)定接口名的前綴，比如所有接口的相對路徑都以api開頭，此時我們可以添加如下配置(和上一個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，實現(xiàn)將a.test.com下的/api/x接口轉(zhuǎn)發(fā)到了b.test.com下面，這個過程大致如下

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

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

這個實現(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ì)其實就是接口服務(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;

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

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

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。