Spring Boot后端集成Angular前端使用Auth0时遭遇CORS问题

我太懂这种卡了好几周的CORS问题有多闹心了！明明后端通过浏览器访问一切正常，前端一接就报错，这种情况大概率是咱们的CORS配置还有遗漏，或者和Auth0的配置没对齐，咱们一步步来排查：

1. 先补全自定义CORS过滤器的关键配置 #

你贴的代码看起来没写完，一个完整的CORS过滤器需要覆盖几个核心响应头，尤其是Auth0登录场景下的凭证携带需求，给你补全完整的实现参考：

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class MyCORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        // 动态允许请求来源，适配多域名场景
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        // 关键：允许携带凭证（Auth0登录后请求会带token相关凭证）
        response.setHeader("Access-Control-Allow-Credentials", "true");
        // 允许的请求方法，覆盖常见的HTTP动作
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        // 允许的请求头，包含Auth0的Authorization头和常用内容类型
        response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type, X-Requested-With");
        // 缓存预检请求结果，减少OPTIONS请求次数
        response.setHeader("Access-Control-Max-Age", "3600");

        // 直接处理OPTIONS预检请求，无需走后续过滤器链
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    @Override
    public void destroy() {}
}

重点提醒：必须设置Access-Control-Allow-Credentials: true，否则浏览器会因为请求携带凭证但后端未授权而拦截响应。

2. 排查Spring Security的过滤器优先级干扰 #

如果你的项目用到了Spring Security，它的过滤器链优先级可能比自定义CORS过滤器更高，导致CORS头还没加上就被Security拦截了。这时候需要在Security配置里显式声明CORS的优先级：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            // 确保CORS配置在所有Security过滤逻辑之前执行
            .cors().and()
            // 其他Auth0相关的Security配置
            .authorizeRequests()
            .anyRequest().authenticated()
            .and()
            .oauth2Login();
    }

    // 统一配置CORS规则，避免和自定义Filter冲突
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        // 明确指定允许的前端域名，比如本地开发的http://localhost:4200
        configuration.setAllowedOrigins(Arrays.asList("你的前端完整地址"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        configuration.setAllowedHeaders(Arrays.asList("Authorization", "Content-Type"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

这里建议不要同时混用自定义Filter和Security的CORS配置，选一种即可，避免规则冲突。

3. 检查Auth0控制台的跨域配置 #

很多人容易忽略这一点：Auth0本身也需要配置允许的前端域名，不然Auth0返回的登录响应也会触发CORS错误。登录Auth0控制台找到你的应用，检查以下配置：

• Allowed Web Origins：必须添加你的前端完整地址（比如http://localhost:4200）
• Allowed Callback URLs：添加登录成功后的前端回调地址（比如http://localhost:4200/callback）
• Allowed Logout URLs：添加登出后的前端跳转地址
  这些配置不正确的话，即使后端CORS没问题，Auth0的登录请求本身也会被浏览器拦截。

4. 前端Angular的请求适配 #

确保你的Angular HttpClient请求开启了withCredentials选项，和后端的Access-Control-Allow-Credentials配置对应：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

callBackendAPI() {
  this.http.get('你的后端接口地址', { withCredentials: true })
    .subscribe(response => {
      // 处理响应逻辑
    });
}

如果后端允许携带凭证，前端未开启这个选项，浏览器会直接拒绝接收响应。

备注：内容来源于stack exchange，提问作者learningProgrammer