记一次关于跨域问题：

问题描述：

接手的别人的项目，前端使用 vuecli 脚手架搭建的项目，通过 webpack devserver 代理:

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: process.env.VUE_APP_SERVER_URL, // 接口域名
        changeOrigin: false, // 是否跨域
        ws: true, // 是否代理 websockets
        secure: false, // 是否https接口
        pathRewrite: {
          // 路径重置
          "^/api": "",
        }
      }
    }
  }}

后端设置了跨域限制，只允许 origin为 http://localhost:8082,http://127.0.0.1:8082 访问

public class LoginHandlerConfig implements WebMvcConfigurer {
    // 省略代码
    @Value("${spring.cors.allowed-origins:'http://localhost:8082,http://127.0.0.1:8082'}")
    private String allowedOrigins;
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        .allowedOrigins(allowedOrigins.split(","))
        .allowedOriginPatterns(allowedOrigins.split(","))
        .allowedMethods(allowedMethods.split(","))
        .allowCredentials(false)
        .maxAge(3600)
        .allowedHeaders("*");
    }
}

结果当我在平时开发环境下是正常的，打包部署到线上后，登录接口报错 403

问题排查

问题乍看起来很清晰，但我当时排查的时候碰到一个误区，我的获取验证码的请求是 GET 请求，是可以正常获取的，而 登录请求是 POST 请求，报 403 错误，所以当时没有觉得是后端的问题，排查的方向偏了。

**Q：**为什么生成环境下报 403，而开发环境下不报❓

开发环境下用了 webpack devserver 代理，浏览器<-->webpack-dev-server <--> 后端，所以不存在跨域；

生产环境下浏览器 <--> 后端，浏览器会自动的添加origin请求头；

❓**Q：**为什么 GET 请求不报 403，POST 请求会报❓

这是因为浏览器对于同源请求，