項目實戰跨域之配置nginx反向代理（基於開發環境和生產環境分析後端分別運行在本地和服務端的狀況）

問題描述：

  前端後臺項目都在本地運行，考慮到端口不一樣，在前端配置了代理以下，可以實現跨域請求，正常獲取數據。但當我把後臺項目都遷移到服務器運行時，前臺卻老是獲取不到數據。

  最近在VUE項目中遇到Ajax異步請求的跨域問題，以前也有系統地學習過跨域問題，網上關於跨域的解決方案整理有不少，我就再也不贅述，只在本次實戰中提供我的經驗。

  我選擇了傳說中最簡單的跨域解決方案---nginx反向代，那麼根據先後端項目都運行在本地（前端開發環境）、後端運行在服務器、前端項目分別運行在本地（前端開發環境）或者服務端進行如下三種狀況來考慮。

 

問題解決：

1、先後端項目都運行在本地，前端爲開發環境

   咱們都知道，前端運行環境分爲開發環境和生產環境，運行在本地時，我啓用的是開發環境。

  一開始，前端後臺項目都在本地運行，若是前端項目經過異步請求獲取後端數據會報錯以下：

  很明顯，出現了跨域問題，因爲跨域資源共享機制，沒有設置 Access-Control-Allow-Origin 所以組織了跨域請求返回的資源（咱們應當明白，跨域問題中瀏覽器發送了請求，可是拒絕了不一樣源服務器返回的資源）。

  而咱們這裏是由於端口不一樣產生了跨域，前端代理配置以下，實現了跨域請求。

 

// vue.config.js
proxy: {
    '/api': { // 匹配全部以 '/api'開頭的請求路徑
    target: 'http://localhost:4000', // 代理目標的基礎路徑
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重寫路徑: 去掉路徑中開頭的'/api'
       '^/api': ''
    }
}

 

  那麼第一種狀況下，先後端都運行在本地，前端在開發環境下便可簡單地實現跨域請求。

 

2、 後端運行在服務器，前端項目運行在本地（開發環境下）

  當後臺項目部署到服務器上之後，更改前端項目中的請求地址和接口，用postman測試，能夠正常獲取數據，證實後端在服務器正常運行。但運行在本地的前端項目卻獲取不到數據，報錯以下：

  後來經驗證，後臺跨域配置註釋掉，仍能夠正常獲取異步請求返回的數據，因而我猜想這應該是由於前臺項目由於時效緣由沒有當即請求到剛剛部署在服務器的後臺項目，但爲何postman測試接口請求數據沒有問題，我也不能準確地解釋緣由，但能夠確定的是：開發環境下，後端不須要多餘的配置便可實現跨域，這是由於vue-cli建立的項目在生產環境中直接利用node.js代理服務器，經過修改 proxy 接口實現跨域請求。

 

 3、先後端項目都運行在服務器上

    當把前臺也部署在服務器之後，就沒法正常獲取異步請求的後端服務器上的資源了，會產生以下報錯。

    這時候只須要配置服務器上的nginx反向代理，便可實現跨域請求。而此時，第一種狀況下，前臺的配置也能夠省去了，由於第一種狀況下的跨域是基於開發環境下對前端配置，即由於vue-cli建立的項目在生產環境中直接利用node.js代理服務器，經過修改 proxy 接口實現跨域請求。而在生產環境下，僅需對後端進行跨域配置，我在項目實戰中將前臺配置所有註釋掉，僅配置後端，異步請求數據可以正常獲取資源。

 

 

  後端跨域配置以下：

// nginx.conf
server{
     listen 80; // 前臺項目端口號
     server_name 140.143.133.253; // 前臺項目ip或域名
     index index.html index.htm index.php;
     root  /www/wwwroot/lynn_z.com/dist; // 前臺項目根目錄
        
     location /api {
          proxy_pass http://140.143.133.253:4000; // 後端域名或IP
          rewrite ^/api/(.*)$ /$1 break; // 重寫URL
          proxy_cookie_domain 140.143.133.253:4000 140.143.133.253:81; // 修改cookie中域名
          add_header Access-Control-Allow-Origin 140.143.133.253:80;
          add_header Access-Control-Allow-Credentials true;

     }
}