什麼是跨域

跨域是瀏覽器的專用概念，指js程式碼訪問自己來源站點之外的站點。比如A站點網頁中的js程式碼，請求了B站點的資料，就是跨域。
A和B要想被認為是同域，則必須有相同的協議（比如http和https就不行）、相同域名、和相同埠號（port）。

開發時如果前端程式碼和後端介面沒有部署在同域伺服器，就會被瀏覽器報跨域。

如果前端要連線傳統後臺伺服器

分部署時的跨域方案和除錯時的跨域方案，具體見下：

1.部署時的跨域解決方案

• 方案1：最利索的，當然還是將前端程式碼和後端介面部署在同域的web伺服器上
• 方案2：由後臺伺服器配置策略，設為允許跨域訪問。

例如：前端頁面部署在uniCloud的前端頁面託管裡，但是需要訪問自己伺服器的介面，這時候需要在服務端允許前端頁面託管的域名跨域訪問。不同的服務端框架允許跨域的配置不一樣，這裡不再一一列舉僅以eggjs為例。

（1）安裝egg-cors包

npm i egg-cors --save

（2）在plugin.js中設定開啟cors

exports.cors = {  
  enable: true,  
  package: 'egg-cors',  
};

（3）在config.default.js中配置

config.security = {  
  domainWhiteList: [ '前端網頁託管的域名' ],  
};

2.除錯時的跨域解決方案

前端工程師除錯時，執行起來的前端程式碼在uni-app自帶的web伺服器中，而不是部署在後臺業務伺服器上，此時就會遇到跨域。
除了協調後端配置允許跨域，其實也可以自己解決跨域問題。共3種方案可選。

方案1 使用HBuilderX內建瀏覽器

這個內建瀏覽器經過官方處理，不存在跨域問題，簡單易用，推薦使用。（需HBuilderX 2.6以上）
在開啟頁面後，點HBuilderX右上角的預覽，即可開啟內部瀏覽器。或者在執行選單裡選擇執行到內建瀏覽器也可以。

方案2 配置webpack-dev-server代理

詳細的配置指南，這裡就直接貼地址了：https://juejin.im/post/5e43b2645188254902765766

根據官方文件的描述，devServer配置被要求在manifest.json去配置，並且由於這個配置檔案是json格式的，所以只能對簡單型別進行配置。但對於proxy

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                "/prefix/api/user/list": {
                    "target": "https://api-remote.xxxx.com",
                    "pathRewrite": {
                        "^/prefix": ""
                    }
                }
            }
        }
    }
}

另一種解決方案

直接建立一個vue.config.js檔案，並在裡面配置devServer，直接上程式碼

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/prefix/api/user/list': {
        target: 'https://api-remote.xxxx.com',
        pathRewrite: {
          '^/prefix': ''
        }
      }
    },
  }
}

這種辦法的好處顯而易見，用js而非json去配置會更加的靈活，需要注意的是以上兩種方案不能同時使用，第一種會覆蓋第二種方案。

方案3 給瀏覽器安裝跨域外掛，禁止瀏覽器報跨域

本外掛並非萬能，請仔細閱讀與學習瀏覽器安全策略相關知識，不懂這些知識在評論裡瞎噴的，官方不會回覆。

當我們使用谷歌瀏覽器除錯ajax請求的時候可能會遇到這兩個問題：

• 跨域資源共享 詳見：CORS
• 跨源讀取阻塞 詳見：CORB

最常見的就是關於跨域資源共享的問題，也就是我們通常說的跨域。當我們本地伺服器預覽頁面，使用ajax訪問遠端伺服器的內容時就會請求失敗，比如：本地預覽的地址是：http://localhost:8080/，訪問的介面地址是http://dcloud.io/api。

如果僅僅是為了本地預覽，可以使用Chrome瀏覽器外掛來協助除錯。
!!!本外掛只能解決簡單請求的跨域除錯（點選搜尋什麼是簡單請求）。對於非簡單請求的OPTION預檢（點選搜尋什麼是預檢請求）以及線上伺服器也有跨域需求的使用者，可以服務端配合解決。

Chrome外掛名稱：Allow-Control-Allow-Origin: *

安裝方式：

• 線上安裝
  使用谷歌瀏覽器直接開啟外掛地址https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi安裝即可
• 離線安裝
  國內使用者如果無法線上安裝，可在本頁面底部下載附件，離線安裝
  1. 下載得到:Allow-Control-Allow-Origin.crx
  2. 點選瀏覽器右上角的選單按鈕開啟谷歌瀏覽器的擴充套件管理頁面

1. 將下載的擴充套件外掛拖入擴充套件管理頁面

使用方式

1. 開啟待除錯的頁面
2. 在擴充套件欄目找到安裝的外掛，點選開啟外掛配置
3. 輸入想要進行跨域除錯的介面的地址，點選新增即可

注意事項

• 此外掛適合本地除錯使用，線上部署如果和介面不同域還需要服務端配合。
• 如果實際響應的內容與瀏覽器預期的內容有差異還可能被CORB策略所阻止。

firefox跨域外掛

firefox跨域外掛(注意firefox的css相容問題)