在前後端分離的開發模式中，在開發中如何解決跨域問題，axios無疑是一個很好的解決方式。但在使用過程中，特別是第一次使用的情景下，經常會出現一些各種各樣的問題，下面是常見遇到的一些問題以及解決方式。

vue-cli搭建的開發環境中，引用axios需要先安裝axios，

npm install axios --save

在安裝過程中，特別是第一次安裝，會出現安裝錯誤，這時可以試用 cnpm install axios --save的方式進行安裝,

如果仍然安裝不上，則刪除專案中的node_modules, cnpm install ,cnpm install axios --save 進行重複安裝

安裝成功後，修改專案檔案config/index.js, 

將module.exports中的 dev中的 proxyTable 設定為如下圖中的值

module.exports = { dev: {
// Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
proxyTable: { '/api': { target: 'http://xxx',//這裡是伺服器地址額 changeOrigin: true, //核心 ，支援跨域 pathRewrite: { '^/api': ''//這裡理解成用‘/api’代替target裡面的地址，後面元件中我們掉介面時直接用api代替 //比如我要呼叫'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’即可 } } },

main.js檔案增加如下程式碼

import axios from 'axios'
Vue.prototype.axios=axios;

經過如上的步驟，在程式碼例項中就可以應用了，如下案例

methods:{ getOrgs(){ this.axios.get("api/sys/security/org").then(response=>{ console.log(response) }).catch(function (error) { console.log(error); }) } }

PS：這裡最噁心的莫過於 axios安裝的過程出錯問題