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

Logo

前往低代码交流专区

更多推荐