SpringBoot+React项目配置@CrossOrigin(origins = "*")后CORS仍失效怎么办

问题根因 #

你遇到的CORS报错和@CrossOrigin(origins = {"*"})本身无关，核心是新增JWT校验拦截器后，拦截了浏览器的CORS预检请求：

• 当请求携带自定义请求头（比如你这里的Authorization）时，浏览器会先发送OPTIONS方法的预检请求，该请求不会携带任何自定义头，自然也不会带JWT
• 你的JWT拦截器直接拦截了无有效JWT的OPTIONS请求，返回错误响应，该响应没有携带CORS相关头，所以浏览器直接报CORS错误
• Postman不会主动发送CORS预检请求，直接携带JWT发正式请求，所以测试正常

解决步骤 #

1. 放行JWT拦截器的OPTIONS请求 #

在你的JWT校验拦截器逻辑最开头新增判断，所有OPTIONS请求直接放行，不做token校验：

@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    // 放行OPTIONS预检请求
    if ("OPTIONS".equals(request.getMethod())) {
        return true;
    }
    // 原有JWT校验逻辑
    // ...
}

2. 完善CORS配置 #

你当前Controller层的@CrossOrigin没有配置允许的请求头和方法，需要补充完整：

@CrossOrigin(origins = "*", allowedHeaders = "*", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.OPTIONS})
@RestController
@RequestMapping("/api/")
public class EmployeeController {
    // 原有逻辑
}

如果项目有多个Controller，更推荐用全局CORS配置，不需要每个Controller单独加注解：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

3. 修复axios调用的参数错误 #

你当前axios.get的参数传递有误，第三个参数的config不会生效，正确写法是把config作为第二个参数传入：

return axios
  .get(API_BASE_URL + "employees", config)
  .then(res => {
    console.log("did it!");
    return res.data;
  });

常见疑问解答 #

• @CrossOrigin(origins = "*")确实是允许所有源访问，但前提是请求能走到Controller层触发CORS逻辑，被拦截器提前返回的响应不会自动加CORS头
• 前端不需要额外配置，只要后端正确放行预检请求、配置CORS即可正常请求

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