vue前端解決跨域問題（axios）

1、安裝環境

需要安裝 axios,http-proxy-middleware 等
這裏我用的是 cnpm 比較快
配置鏈接：https://www.jianshu.com/p/79d4430e0a9d

 cnpm install axios

安裝成功截圖：

cnpm install http-proxy-middleware

安裝成功截圖：

2、配置代理

1.在config文件夾下的index.js文件中的proxyTable字段中，作如下處理：

  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target:'http://47.115.12.243', // 你請求的第三方接口
        changeOrigin:true, // 在本地會創建一個虛擬服務端，然後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
        pathRewrite:{  // 路徑重寫，
          '^/api': ''  // 替換target中的請求地址，也就是說以後你在請求 http://47.115.12.243 這個地址的時候直接寫成/api即可。
        }
      }

    },

2.在main.js，進行如下配置

// axios - 請求接口
import axios from 'axios';
Vue.prototype.axios = axios;
axios.defaults.baseURL = '/api'  //關鍵代碼

3.原理

原理：

因爲我們給url加上了前綴/api，我們訪問/xxx就當於訪問了：localhost:8080/api/xxx（其中localhost:8080是默認的IP和端口）。

在index.js中的proxyTable中攔截了/api,並把/api及其前面的所有替換成了target中的內容，因此實際訪問Url是http://47.115.12.243/xxx

至此，純前端配置代理解決axios跨域得到解決。

參考鏈接：https://blog.csdn.net/wh_xmy/article/details/87705840?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase