axios處理跨域問題

首先npm安裝好axios，其次在main.js中引入：

import axios from 'axios'

Vue.prototype.$axios = axios //把axios掛載到vue的原型中，在vue中每一個組件均可以使用axios發送請求
Vue.prototype.HOME = '/api' //重要在於這裏，Vue.prototype.HOME = '/api'是一個定值，默認指向localhost，全部修改指向路徑爲'/api'，配置文件index.js定義的可跨域路徑

第二步就是修改上述所說的config>index.js配置文件

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {     //axios跨域處理
      '/api': {       //此處並不是和url一致
        target:'http://192.168.2.80:8081/',
        changeOrigin:true, //容許跨域
        pathRewrite:{
          '^/api': ''
        }
      }
    }
}
....如下省略
}

最後就是在須要跨域的文件中操做了：

created() {
      var url = this.HOME + '/index***ds/getFe***List';  //HOME變量爲已掛載的可跨域域名，這裏將其拼接完，成爲一個完整路徑
      this.$axios({  //this表明vue對象，以前在入口文件中把axios掛載到了vue中，因此這裏直接用this.$axios調用axios對象
        method: 'post',
        url: url,
        data: {feedType: 1, page: 1, pagesize: 10}
      }).then(function (res) {
        console.log(res);
      }).catch(function (err) {
        console.log(err);
      })
    },

這樣就能夠成功跨域，拿到後臺返回的數據了。

須要注意的是：在Vue項目中若是咱們修改了config裏面的文件，請千萬要從新啓動項目，從新啓動項目，從新啓動項目，否則必定會報錯。

固然，這只是在本地能夠正常跨域訪問接口，線上的話，還須要和後臺協商處理

升級到 Vue3 後，會發現 Vue2 中存放配置的 config 文件夾沒有了，你們不要慌張。能夠在 package.json 文件的同級目錄下建立 vue.config.js 文件。給出該文件的基礎配置：

module.exports = {
    outputDir: 'dist',   //build輸出目錄
    assetsDir: 'assets', //靜態資源目錄（js, css, img）
    lintOnSave: false, //是否開啓eslint
    devServer: {
        open: true, //是否自動彈出瀏覽器頁面
        host: "localhost", 
        port: '8081', 
        https: false,   //是否使用https協議
        hotOnly: false, //是否開啓熱更新
        proxy: null,
    }
}

Vue3 解決跨域，內容只有第二步配置代理 和 Vue2 不一樣，其餘的一致。

devServer: {
    open: true, //是否自動彈出瀏覽器頁面
    host: "localhost", 
    port: '8081',
    https: false,
    hotOnly: false, 
    proxy: {
        '/api': {
            target: 'https://www.v2ex.com/api', //API服務器的地址
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
}