已配置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}},},}

导致上面问题的原因，经过排查是: axios写死了http的prefix为 http://dev.com/api， 直观从控制台看到浏览器直接向后端发请求 也就是 http://dev.com/api

solution

axios的http请求的prefix不要写死，改为 ‘/’ 即可， 此时控制台可以看到浏览器请求目标是 http://localhost:3000