已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错-Toy模板网

这篇具有很好参考价值的文章主要介绍了已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错

problem

已配置vue.config.js中的proxy代理，前端本地环境仍然请求后端出现跨域报错
控制台仍然出现cors禁止报错，接口调不通

reason

配置proxy代理解决跨域问题的原理是：

前端工程本地环境会启动一个 express 或 koa 的web服务例如 http://localhost:3000
后端接口可能是ip 有可能是dev的域名例如 http://dev.com/api

前端页面通过axios调用后端接口，

如果直接从浏览器发起请求，相当于浏览器(3000端口) 向 http://dev.com/api 发起请求，属于跨域，会被cors阻止
如果是浏览器->express/koa->后端，则属于2个web server后端之间发起请求，浏览器-> http://localhost:3000 -> http://dev.com/api 不属于跨域，不会出现cors阻止问题

proxy实现跨域常见配置如下

module.exports={
   devServer: {
        proxy: {
            "/api": {
                target: "http://dev.com", // 接口的域名
                changeOrigin: true                
            }
        },
    },
}