問題描述：
前端后台項目都在本地運行，考慮到端口不同，在前端配置了代理如下，能夠實現跨域請求，正常獲取數據。但當我把后台項目都遷移到服務器運行時，前台卻總是獲取不到數據。
最近在VUE項目中遇到Ajax異步請求的跨域問題，之前也有系統地學習過跨域問題，網上關於跨域的解決方案整理有很多，我就不再贅述，只在本次實戰中提供個人經驗。
我選擇了傳說中最簡單的跨域解決方案---nginx反向代，那么根據前后端項目都運行在本地（前端開發環境）、后端運行在服務器、前端項目分別運行在本地（前端開發環境）或者服務端進行以下三種情況來考慮。
問題解決：
一、前后端項目都運行在本地，前端為開發環境
我們都知道，前端運行環境分為開發環境和生產環境，運行在本地時，我啟用的是開發環境。
一開始，前端后台項目都在本地運行，如果前端項目通過異步請求獲取后端數據會報錯如下：
很明顯，出現了跨域問題，由於跨域資源共享機制，沒有設置 Access-Control-Allow-Origin 因此組織了跨域請求返回的資源（我們應當明白，跨域問題中瀏覽器發送了請求，但是拒絕了不同源服務器返回的資源）。
而我們這里是因為端口不同產生了跨域，前端代理配置如下，實現了跨域請求。
// vue.config.js proxy: { '/api': { // 匹配所有以 '/api'開頭的請求路徑 target: 'http://localhost:4000', // 代理目標的基礎路徑 changeOrigin: true, // 支持跨域 pathRewrite: { // 重寫路徑: 去掉路徑中開頭的'/api' '^/api': '' } }
那么第一種情況下，前后端都運行在本地，前端在開發環境下即可簡單地實現跨域請求。
二、 后端運行在服務器，前端項目運行在本地（開發環境下）
當后台項目部署到服務器上以后，更改前端項目中的請求地址和接口，用postman測試，可以正常獲取數據，證明后端在服務器正常運行。但運行在本地的前端項目卻獲取不到數據，報錯如下：
后來經驗證，后台跨域配置注釋掉，仍可以正常獲取異步請求返回的數據，於是我猜測這應該是因為前台項目因為時效原因沒有立即請求到剛剛部署在服務器的后台項目，但為什么postman測試接口請求數據沒有問題，我也不能准確地解釋原因，但可以肯定的是：開發環境下，后端不需要多余的配置即可實現跨域，這是因為vue-cli創建的項目在生產環境中直接利用node.js代理服務器，通過修改 proxy 接口實現跨域請求。
三、前后端項目都運行在服務器上
當把前台也部署在服務器以后，就無法正常獲取異步請求的后端服務器上的資源了，會產生如下報錯。
這時候只需要配置服務器上的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; } }
