axios使用过程中的一些坑
在前后端分离的开发模式中，在开发中如何解决跨域问题，axios无疑是一个很好的解决方式。但在使用过程中，特别是第一次使用的情景下，经常会出现一些各种各样的问题，下面是常见遇到的一些问题以及解决方式。vue-cli搭建的开发环境中，引用axios需要先安装axios，npm install axios --save在安装过程中，特别是第一次安装，会出现安装错误，这时可以试用 cnpm in
·
在前后端分离的开发模式中，在开发中如何解决跨域问题，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安装的过程出错问题
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)