API地址:
http://www.caiji.me/api/test (本地开发的接口地址,访问接口会返回字符串“接口测试”;
axios请求方法:引入组件 axios后,编写请求接口方法:
mounted() { axios.get('http://www.caiji.me/api').then(function (res) { console.log(res); }); }
本地 运行项目时,在执行到请求时报错显示:
Access to XMLHttpRequest at 'http://www.caiji.me/api' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
很明显,属于跨域问题。此处不探讨其他解决方案。
下面说一下自己的解决方案。
本人初学vue脚手架版本为4.4.6 ,在vue.config.js 添加如下标红代码:
module.exports = {
outputDir: '../public'
, devServer: {
proxy: {
'/api': {
target: 'http://www.caiji.me',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '/api',
}
}
}
}
}
同时将vue中请求修改为:
axios.get('/api/test').then(function (res) { console.log(res); });
修改完成后,重新运行一下项目。即可完成跨域请求操作。
请求结果如下:
本文地址:https://blog.csdn.net/qq_32257643/article/details/107578404
如对本文有疑问, 点击进行留言回复!!
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
解决vue动态路由异步加载import组件,加载不到module的问题
解决vue的router组件component在import时不能使用变量问题
Vue中的this.$options.data()和this.$data用法说明
GBase 8a MPP Cluster使用Ceph做存储计算分离
网友评论