提到跨域首先介紹下什麼是同源策略。

同源策略限制從一個源載入的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。

同源：相同協議，相同域名，相同埠，三個條件缺一不可。

非源：無法獲取cookie、localstorage、無法讀取indexDB、無法獲得DOM、AJAX不能發送。

在Vue中最推薦的是CORS，全稱為 Cross Origin Resource Sharing（跨域資源共享）。

這種方案對於前端來說沒有什麼工作量，和平時發請求寫法上沒有任何區別，工作量基本都在後端這裡，使用CORS前端不需要配置proxytable。

每一次請求，瀏覽器必須先以 OPTIONS 請求方式發送一個預請求，從而獲知伺服器端對跨源請求所支持 HTTP 方法。在確認伺服器允許該跨源請求的情況下，以實際的 HTTP 請求方法發送那個真正的請求。

大家可以看到每個介面都走了兩次，不要擔心性能，這個預請求只是確認。它的preview和responese中沒有任何數據。

推薦的原因是隻要第一次配好了，之後不管有多少介面和項目復用就可以了，一勞永逸的解決了跨域問題，而且不管是開發環境還是正式環境都能方便的使用。

但總有後端覺得麻煩不想這麼搞。那前端也是有解決方案的。

在 dev 開發模式下可以下使用 webpack 的 proxy 。但這種方法在生產環境是不適用的。在生產環境中需要使用 nginx 反向代理。不管是 proxy 和 nginx 的原理都是一樣的，通過搭建一個中轉伺服器來轉發請求規避跨域的問題。

推薦閱讀：