最近在專案中使用了Vue CLI 3.0版本，專案中需要設定反向代理解決跨域問題，下面記錄一下設定過程。

新建配置檔案

在專案的根目錄下新建 vue.config.js 檔案，自Vue CLI 3開始，專案中所有的配置資訊都寫在這個檔案中（2在config目錄中配置）。

配置反向代理

設定代理

module.exports = {
  devServer: {
    // 設定代理
    proxy: {
      "/v1": {
        target: "http://127.0.0.1:8081/", // 域名
        ws: true, // 是否啟用websockets
 

        changOrigin: true, //開啟代理：在本地會建立一個虛擬服務端，然後傳送請求的資料，並同時接收請求的資料，這樣服務端和服務端進行資料的互動就不會有跨域問題
        pathRequiresRewrite: {
          "^/v1": "/"
        }
      }
    }
  }
};

在請求中使用

// '/v1'等於'http://127.0.0.1:8081/v1'
// 此時請求地址為'http://127.0.0.1:8081/v1/picture?method=upload'
get('/v1/picture?method=upload')

更多