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类解决跨域问题）但由于这是我在网上找的接口没法让别人后端帮我解决跨域问题，那只有前端来解决了。

解决方案：

在项目下，跟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，在查了许多博客之后得知，修改了配置文件后一定要重启服务！！！

最后

成功获取返回值