关于在vue中axios跨域问题没反应的问题
之前按照网上的教程走了一遍发现没有实现,于是在经历了一天的闷棍后,终于找到了实现方法。果然解决方法比较懵逼。以后还需努力学习。现在发一遍网络上同用的教程。1.首先引入包npm install axios -s2.在主文件夹下创建vue.config.js文件,输入以下代码module.exports={//打开vue官网 vue cli查看vue.config.js配置。//vue脚手架全部打包好
·
之前按照网上的教程走了一遍发现没有实现,于是在经历了一天的闷棍后,终于找到了实现方法。果然解决方法比较懵逼。以后还需努力学习。
现在发一遍网络上同用的教程。
1.首先引入包
npm install axios -s
2.在主文件夹下创建vue.config.js文件,输入以下代码
module.exports={
//打开vue官网 vue cli查看vue.config.js配置。
//vue脚手架全部打包好了,你想要啥东西都可以在这里配置,不能直接里面配置
lintOnSave:false,//关闭语法检查
//跨域的两种写法
//第一种是这样的,只能跨一个域,
//而且同源下若是有一个同名文件,就先跨域到本文件下的文件那里去
// devServer:{
// proxy:'http://119.23.110.93:8080'
// }
//第二种方法,可以跨很多域
devServer:{
proxy:{
'/api':{
target:'http://127.0.0.1:8000',//你要跨域的服务器
changeOrigin: true, // 允许跨域
pathRewrite:{'^/api':''},//位置替换,把请求的/api换为空
//正则表达式,/api变为空字符串
//由于前面写http://localhost:8081/api/hello
//传到服务器是/api/hello,不是/hello
//所以现在将/many去掉
},
'aaa':{
target:'http://Other'
}
}
}
}
3.然后在引入文件
import axios from 'axios';
Vue.prototype.$axios = axios;
4.然后重启服务器,发送请求,不出意料是失败了
GetNum2(){
axios.get('/api/hello').then(
response =>{
console.log('请求成功'+JSON.stringify(response.data))
},
error =>{
console.log('请求失败了'+error.message)
}
)
},
第二种方法(我成功的方法)
1.去到config文件夹,找到index.js,在dev部分添加
dev: {
proxyTable: {
'/api': { //代理标识
target: 'http://127.0.0.1:8000',//指向的实际地址
changeOrigin: true, // 允许跨域
pathRewrite: {'^/api': '' },
}
},
}
2.重启服务器,然后查看效果,成功了
此时发送的请求接口如下,是vue的服务端口请求的,不是8000后端接口发送的。
更多推荐
已为社区贡献4条内容
所有评论(0)