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

最近公司前后端分離，前端獨立提供頁面和靜態服務很自然的就想到了用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   } })}