今天遇到的跨域問題，本來想實現下PDF功能的，然後安裝了vue-pdf插件，在功能調試的時候發現 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403問題（localhost:8080和*.*.*.*:8080雖然都指向本機，但也屬于跨域）。

同源策略/SOP（Same origin policy）是一種浏覽器約定，它是浏覽器最核心也最基本的安全功能，為了防止浏覽器受到XSS、CSFR的攻擊，浏覽器采用了同源策略（保護Cookie）規定某域下的客戶端在沒明确授權的情況下不能讀寫另一個域的資源，隻有當"協議 域名 端口"三者相同都相同時才為同源。

顧名思義就是一個網域向另一個網域進行資源交互，即兩個網域的"協議 域名 端口"不同。跨域訪問違反了同源策略，所以當請求不在同一域名下的資源文件（“協議 域名 端口“）時就報了No 'Access-Control-Allow-Origin'錯誤。

錯誤提示No 'Access-Control-Allow-Origin'響應頭，我們就手動配置響應頭Access-Control-Allow-Origin，之前用Python開發的時候有遇到過跨域問題：Django實戰004:跨域請求問題解決，我們通過corsheaders中間件在後台進行了跨域設置允許所有IP訪問。

除了可以在後台配置跨域問題，其實在vue中也可以進行跨域配置的。vue cli30修改配置信息需要新建vue.config.js文件，在module.exports方法的devServer對象中proxy 選項來添加代理配置（當前端沒有匹配到當前路由時就會被代理到服務器接口地址）：

測試登錄頁面，第一次打開前端路由時訪問正常， 當我點擊登錄之後依舊提示：No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 錯誤，而且當我再次刷新路由的時候網頁被代理到服務器接口地址。

查了下網上很多關于代理的配置方法我也試了下，為代理添加了代理路徑，并為axios 配置了baseURL。為了能跳回沒有api的路徑，我通過pathRewrite屬性對路由進行了重寫，但是還是出現了No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 錯誤。

單服務器請求配置

折騰了好久，終于找到了正确的方式了，比如說我們要通過http://192.168.31.180:8080/login訪問後台接口 http://192.168.31.180:8000/login實現登錄功能。設置代理之後代理會檢查請求開頭是否與代理映射相符，不符合則不走代理，所以使用axios請求的時候無需配置axios.defaults.baseURL屬性（否則會跳過代理）。當匹配到映射路徑時就會進入代理并将 target屬性補全到請求路徑。這種方式雖然成功了，但是還是存在之前遇到的缺陷，因為匹配的是‘/’，Vue的路由也符合這一條件，所以刷新後會進入代理配置直接跳轉到後台路由了。

多服務器請求配置

當我們遇到要訪問多個後台接口時，我們可以為每個服務器配置不同代理服務，以映射路徑作為區分當我們訪問到相應的路徑時走對應的代理服務器，但真實的請求中沒有該路徑，所以我們需要利用pathRewrite屬性把該路徑去掉。所以為了避免路由直接跳轉至後台，一個服務器接口也這種配置，隻有在請求接口的時候才走代理。

1，路由請求中添加一個路由标識，如：/api/login（切勿設置axios.defaults.baseURL屬性）

2，代理中映射路徑指向标識路由，當匹配到映射路徑時就會進入代理并 target屬性補全到請求路徑。

3，利用pathRewrite屬性重寫路徑，還原真實的請求路由。

更多Vue實戰技巧可以參考我的專欄：Vue實戰系列

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!