vue專案解決跨域問題(通過伺服器代理)

2020-09-28 11:01:40

使用的是伺服器代理方式解決跨域

第一步

在vue專案根目錄中建立資料夾vue.config.js檔案
(根目錄就是專案名稱目錄就是根目錄,直接在專案名稱上右擊建立檔案)
注意:檔名是固定的vue.config.js

第二步

開啟檔案vue.config.js
寫入如下程式碼:

module.exports = {
//搭建伺服器
    devServer: {
    //代理
        proxy: {
        //代理名稱
            '/api': {
            //請求目標
                target: 'http://localhost:9999',//這裡寫的是你要請求的地址
                //重寫路徑
                pathRewrite: {
                    '^/api': ''
                }
			}
        }
    }
}

如果還有第二個請求地址繼續在proxy物件中寫入同上繼續在'/api'物件後邊寫api是自定義的名稱

第三步

在你需要獲取網路資料的地方直接使用如下程式碼:

created() {
    this.$http({
      url: "/api/items",//記得在前邊加上你寫的代理名稱
    }).then((res) => {
      console.log(res);
      this.items = res.data;
    });
  },

$http是給外掛axios我自己寫的名字程式碼如下:

import axios from 'axios'

Vue.prototype.$http=axios
//這裡的$http就是上邊使用的那個

總結:以上就是解決跨域問題的全部步驟