这种错误就是跨域问题:
![](https://www.codeprj.com/image/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2ktYmV0YS8xODcxNjEwLzIwMjAwMi8xODcxNjEwLTIwMjAwMjAxMTk1MDQ1OTMxLTY4NTc3NzIxNS5wbmc=.png)
我百度了各种方法,最终下面这种方法解决了,直接上代码:
解决:
如果没安装axios:
npm install axios -save //安装axios
main.js
//引入axios
import axios from 'axios'
Vue.prototype.axios=axios
axios.defaults.baseURL = '/api'
我用的是vue-cli3开发的项目,没有vue.config.js目录,这个是我新建的
![](https://www.codeprj.com/image/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2ktYmV0YS8xODcxNjEwLzIwMjAwMi8xODcxNjEwLTIwMjAwMjAxMTk1NTA0NTY0LTE4ODg0OTA2OTIucG5n.png)
vue.config.js中的代码:
module.exports = {
devServer: {
proxy: {
'/api': {
// 此处的写法,我访问的是http://localhost:8080/api/dataHome.json设置代理后,axios请求不需要把域名带上,只需要把路径前面加上 /api 即可。
target: 'http://localhost:8080/api/',
// 允许跨域
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
请求路径:
由于设置了 pathRewrite ,所以请求时会把 /api 替换成 '' ,最终的请求路径为 /dataHome.json
methods:{
http(){
let that=this;
this.axios.get("/dataHome.json")
.then((res)=>{
console.log(res);
}).catch((error)=>{
console.log(error)
})
}
}
重新运行
最后请求到了数据,嘿嘿
|