Vue3解决跨域问题,报错Access-Control-Allow-Origin

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类解决跨域问题)但由于这是我在网上找的接口没法让别人后端帮我解决跨域问题,那只有前端来解决了。
Vue3解决跨域问题,报错Access-Control-Allow-Origin

解决方案:

在项目下,跟package.json同级的地方新建vue.config.js
Vue3解决跨域问题,报错Access-Control-Allow-Origin
在vue.config.js中加入以下代码

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://www.runoob.com/', //接口域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/api': ''
                }
            }
        }
    }
};

我原本代码中使用axios时是这样的
Vue3解决跨域问题,报错Access-Control-Allow-Origin
在配置文件中我们为下面的链接创建了一个代理,我们以后调用接口就要用“/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,在查了许多博客之后得知,修改了配置文件后一定要重启服务!!!

最后

成功获取返回值
Vue3解决跨域问题,报错Access-Control-Allow-Origin

上一篇:详细讲解阿里云服务器基础知识【初学者必看】


下一篇:access 数据库入门