Vue3解决跨域问题Access to XMLHttpRequest at ‘https://www.runoob.com//try/ajax/json_demo.json’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
问题描述:
在本地测试不同开发环境的接口时遇到了跨域问题,状态码为200却被浏览器拦截。另外看到CORS我也反应是跨域问题(因为后端可以通过CORS类解决跨域问题)但由于这是我在网上找的接口没法让别人后端帮我解决跨域问题,那只有前端来解决了。
解决方案:
在项目下,跟package.json同级的地方新建vue.config.js
在vue.config.js中加入以下代码
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://www.runoob.com/', //接口域名
changeOrigin: true, //是否跨域
ws: true, //是否代理 websockets
secure: true, //是否https接口
pathRewrite: { //路径重置
'^/api': ''
}
}
}
}
};
我原本代码中使用axios时是这样的
在配置文件中我们为下面的链接创建了一个代理,我们以后调用接口就要用“/api”来替换我们配置文件中配置的链接(在这里,我配置文件中的链接就是下面的链接)
https://www.runoob.com/
因此配置后我使用axios的代码就变成了,这里我把后面的路径赋值给了url变量,这一步并不是必须的。
mounted:function () {
let url = "/try/ajax/json_demo.json";
axios.get('/api' + url)
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
})
!!!就在我以为不用重启服务,让它自编译的时候就可以,正在我激动的准备接收返回值的时候,又给我报错404,在查了许多博客之后得知,修改了配置文件后一定要重启服务!!!
最后
成功获取返回值