axios使用过程中的一些坑

     在前后端分离的开发模式中，在开发中如何解决跨域问题，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安装的过程出错问题