前后端分离项目部署Nginx后SpringBoot跨域配置不生效是什么原因？

你遇到的跨域失效问题和你配置的SpringBoot CorsFilter本身没有语法错误，常见失效的核心原因通常是以下三类，按出现概率从高到低排列：

• Nginx请求转发逻辑问题
  前端部署在Nginx后，你的Axios请求默认是打到Nginx服务，而不是直接打到SpringBoot服务：
  1. 如果Nginx拦截了OPTIONS预检请求，没有转发到后端，SpringBoot的跨域配置自然不会生效
  2. 如果Nginx本身配置了错误的跨域响应头，会覆盖后端返回的跨域头导致冲突
  3. 如果Axios的baseURL配置了Docker内部的服务地址（比如`http://backend:8080），浏览器端无法解析Docker内部服务名，请求404也会被浏览器判定为跨域错误
• SpringBoot过滤器链优先级问题
  如果项目中存在其他前置过滤器（比如权限校验过滤器、JWT校验拦截器），优先级高于CorsFilter，OPTIONS请求被前置过滤器直接拦截返回，没有走到CorsFilter添加跨域头
• 配置冲突问题
  如果你同时在SpringBoot和Nginx两层都加了跨域配置，两边返回的响应头重复冲突，浏览器也会判定为跨域错误

方案1：Nginx反向代理解决（推荐，无需后端额外配置跨域） #

生产环境优先用同域名路径区分前后端请求，从根源上避免跨域问题，Nginx配置示例如下：

server {
    listen 80;
    server_name 你的服务器公网IP/绑定的域名;

    # 前端静态资源匹配规则
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # 后端接口转发规则，所有/api前缀的请求转发到SpringBoot服务
    location /api/ {
        # 这里填docker-compose中SpringBoot服务的服务名和端口
        proxy_pass http://你的SpringBoot服务名:服务端口/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

配置完成后将Axios的baseURL修改为/api即可，同域名同端口请求不存在跨域问题。

方案2：保留后端跨域配置的修复步骤 #

如果要让现有后端跨域配置生效，按以下步骤调整：

1. 调整CorsFilter优先级为最高，避免被前置过滤器拦截，修改配置类如下：

@Configuration
public class CorsConfig {

    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOriginPattern("*"); 
        corsConfiguration.addAllowedHeader("*"); 
        corsConfiguration.addAllowedMethod("*"); 
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setMaxAge(3600L);
        source.registerCorsConfiguration("/**",corsConfiguration);
        FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source));
        // 设置为最高优先级，早于所有业务过滤器执行
        bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
        return bean;
    }
}

2. 移除Nginx中所有自定义的跨域头配置，避免和后端返回的头冲突
3. 确认Axios请求地址是浏览器可以正常访问的公网地址，不要使用Docker内部服务域名

跨域配置只需要任意一端配置生效即可，不需要前后端同时配置，生产环境更推荐使用Nginx反向代理的方案，性能更好也更安全，不需要将后端服务端口暴露到公网。

内容的提问来源于stack exchange，提问作者Krito