Angular与Spring Boot对接出现Access-Control-Allow-Origin跨域错误如何解决

问题根因 #

该CORS报错核心原因是：请求携带了自定义的Authorization请求头，会触发浏览器的预检OPTIONS请求，当前后端配置没有正确处理这类预检请求，要么是Spring Security拦截了OPTIONS请求，要么是CORS配置不完整导致跨域头未返回。

解决方案 #

1. 优先排查Spring Security配置（90%以上是该原因） #

因为使用了JWT鉴权必然集成了Spring Security，其默认会拦截所有未放行的OPTIONS预检请求，导致请求根本到不了控制器的@CrossOrigin注解，自然不会返回跨域头。
在Spring Security配置类中添加OPTIONS请求放行规则：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        // 其他原有配置不变，新增下面规则
        .cors().and()
        .authorizeRequests()
        .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
        // 剩下的原有鉴权规则保持不变
        .anyRequest().authenticated()
        // ... 其余原有配置
}

2. 补全控制器@CrossOrigin配置 #

当前的@CrossOrigin仅配置了允许的源，未显式允许自定义头和请求方法，补全配置如下：

// 请求携带了Authorization自定义头，且预检用OPTIONS方法，必须显式声明允许
@CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "*", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.OPTIONS})
@RestController
public class Home {
    // 原有接口代码保持不变
}

⚠️ 注意：如果后续需要开启allowCredentials = true（比如传递cookie、鉴权信息），origins不能写*，必须写具体的前端源地址，比如这里的http://localhost:4200。

3. 替换为全局CORS配置（更稳妥，无需每个控制器加注解） #

如果不想每个控制器都加@CrossOrigin，直接写全局跨域配置类即可：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600); // 预检请求的缓存时间，单位秒，减少重复预检请求
    }
}

前端配置检查 #

你提供的拦截器和app.module.ts配置没有问题，只要loginService.getToken()能正常返回token即可，无需修改。

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