CORS 策略：无法解析预检响应中的 Access-Control-Allow-Headers 响应标头字段答案

【问题标题】：CORS policy: Cannot parse Access-Control-Allow-Headers response header field in preflight responseCORS 策略：无法解析预检响应中的 Access-Control-Allow-Headers 响应标头字段
【发布时间】：2021-09-10 23:31:09
【问题描述】：

我的 Angular 和 Spring Boot 应用程序存在 CORS 问题。我不明白它是什么。

CORS policy error

我的角码：

login(user : User)
  {
  return this.http.post<User>(this.apiURL+'/login', user , {observe:'response'});
  }

对于服务器端，我允许这样的跨源

response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Methods",
                "GET,HEAD,OPTIONS,POST,PUT,DELETE");
        response.addHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers," +
                "Origin, Accept, X - Requested - With, Content - Type, Access - Control - Request - Method," +
                "Access - Control - Request - Headers, Authorization");
        response.addHeader("Access-Control-Expose-Headers", "Authorization, Access-ControlAllow-Origin,Access-Control-Allow-Credentials ");
        if (request.getMethod().equals("OPTIONS")) {
            response.setStatus(HttpServletResponse.SC_OK);
            return;
        }

【问题讨论】：

标签： java angular cors

【解决方案1】：

在您的 Spring 应用程序中，您应该有一个安全配置文件，您可以将其命名为 SecurityConfig.java。

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

@Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
                .cors()
                .configurationSource(corsConfigurationSource())
                // other config here
    }

 CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration.applyPermitDefaultValues());
    return source;
}

}

试试这个，看看它是否有效。

在您的 Spring 控制器中，您还应该在控制器类 @CrossOrigin(origins = "http://localhost:4200") 之前添加此注释检查 4200 是否是您用于 Angular 应用程序的端口，如果不是用您的端口更改它。

@CrossOrigin(origins = "http://localhost:4201")
@RestController
public class YourController {
....

【讨论】：

非常感谢！很有帮助