解决Angular与Spring Boot应用间的CORS跨域问题

从源地址'http://localhost:4200'向'http://localhost:8080/Backend/users/signin'发起XMLHttpRequest请求时被CORS策略阻止：预检请求的响应未通过访问控制检查：请求的资源上不存在'Access-Control-Allow-Origin'头信息。

• 在后端代码中添加CORS配置，允许来自http://localhost:4200的前端应用请求。以下是Spring Boot的配置示例：

  import org.springframework.context.annotation.Bean;
  import org.springframework.context.annotation.Configuration;
  import org.springframework.web.cors.CorsConfiguration;
  import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  import org.springframework.web.filter.CorsFilter;
  
  @Configuration
  public class CorsConfig {
      @Bean
      public CorsFilter corsFilter() {
          CorsConfiguration config = new CorsConfiguration();
          config.addAllowedOrigin("http://localhost:4200");
          config.addAllowedMethod("*");
          config.addAllowedHeader("*");
          config.setAllowCredentials(true);
  
          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          source.registerCorsConfiguration("/**", config);
          return new CorsFilter(source);
      }
  }
  

• 检查CORS配置是否在应用中正确应用和加载，修改后务必重启服务器。
• 验证后端服务器返回的响应头，确认包含值为http://localhost:4200的Access-Control-Allow-Origin头。
• 若使用Angular CLI及proxy.conf.json，排查是否存在代理或CORS配置冲突。
• 查看服务器日志，定位与CORS请求相关的错误信息。

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