Vue3解决跨域问题，报错Access

admin管理员组

文章数量:1794759

Vue3解决跨域问题，报错Access

Vue3解决跨域问题Access to XMLHttpRequest at ‘www.runoob//try/ajax/json_demo.json’ from Origin ‘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: 'www.runoob/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api': '' } } } } };

我原本代码中使用axios时是这样的 在配置文件中我们为下面的链接创建了一个代理，我们以后调用接口就要用“/api”来替换我们配置文件中配置的链接（在这里，我配置文件中的链接就是下面的链接）

www.runoob/

因此配置后我使用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，在查了许多博客之后得知，修改了配置文件后一定要重启服务！！！

最后

成功获取返回值

本文标签： 报错Access