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