新版vue/cli創建項目中解決axios跨域CORS問題

本地開發環境中使用axios調用遠程服務器api接口出現下面的錯誤:

Access to XMLHttpRequest at ‘https://api.xxx.xxx/xx’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

典型的CORS跨域問題,剛開始捯飭vue和axios,當然用的都是最新版本了,結果網上一搜解決方案,一坨一坨的海噴胡呲,GayHub上axios的issue區裏面的回覆也是各種👎,好不容易找到個設置本地proxyTable的方法,結果應該還都是針對的老版本vue-cli腳手架創建的項目,原文裏面提到了

在webpack配置一下config/index.js裏面的proxyTable就OK了

可是我是用最新的vue/cli腳手架創建的項目,就木有config/這個文件夾…思路是有了,還是看一下webpack官方的文檔吧,於是找到了這個 再結合vue官方文檔,新版本的vue中使用的是和package.json同級別路徑中的vue.config.js作爲webpack的配置文件,當然這個vue.config.js默認是沒有的,手動創建一個就行,然後配置內容寫成這樣:

module.exports = {
    devServer: {
        proxy: 'https://api.xxx.com/v1'
    }
}

補充一下: 要訪問的遠端服務器API地址是這樣的(帶參數的GET請求):

https://api.xxx.com/v1/getServiceInfo?veid=xxx&api_key=xxx

創建好上面的vue.config.js配置文件後調整一下之前寫的axios請求

// axios已經在main.js中註冊給了全局變量$http
// import axios from 'axios'
// Vue.prototype.$http = axios

this.$http({
      url: "/getServiceInfo",
      method: "get",
      crossdomain: true,
      params: {
        veid: 123321,
        api_key: "xxxxxxxxxxxx"
      }
    }).then(res => {
      console.log(res.data);
    });

這裏需要注意設置過proxy之後再使用axios發送請求的url就不能寫完整的地址了,直接寫/和後面的名稱就行,走代理之後會拼接成完整的原始地址.

避坑警告 上面配置好vue.config.js之後必須重新啓動一遍devserver,否則yarn serve命令運行的開發服務器的熱更新是不會使用這個新建的配置文件的.

至此,再用axios請求遠端服務器的api接口,嘛毛病都沒有了!(此處應有掌聲和鮮花❤️)