Angular+Spring Cloud跨域问题：GET正常POST请求失败

1. 检查Angular POST请求构造是否合规 #

• 确认请求头包含正确的Content-Type，Angular的HttpClient默认会为JSON请求添加application/json，但如果手动修改过请求头，可能导致格式不匹配。
• 确保请求体正确序列化：若发送JSON数据，直接传入对象即可（HttpClient自动处理序列化）；若发送表单数据，必须使用FormData对象。
• 示例代码：

  // 标准JSON POST请求示例
  this.http.post('/api/your-endpoint', { param1: 'value1', param2: 'value2' }, {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  }).subscribe(response => {
    // 处理响应
  });
  

2. 重点排查Gateway层的跨域配置 #

下游微服务的@CrossOrigin或WebMvcConfigurer配置会被Spring Cloud Gateway覆盖，必须在网关层单独配置跨域（Gateway基于WebFlux，不能用MVC的配置方式）：

@Configuration
public class GatewayCorsConfig {
    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration corsConfig = new CorsConfiguration();
        corsConfig.addAllowedOrigin("*");
        corsConfig.addAllowedMethod("*");
        corsConfig.addAllowedHeader("*");
        corsConfig.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfig);

        return new CorsWebFilter(source);
    }
}

3. 验证Angular代理配置是否生效 #

• 检查proxy.conf.ts的路径匹配规则和目标地址是否正确：

  const PROXY_CONFIG = [
    {
      context: ['/api/**'], // 匹配Angular发送的请求路径
      target: 'http://localhost:8082', // 网关地址
      secure: false,
      changeOrigin: true
    }
  ];
  export default PROXY_CONFIG;
  

• 确保启动Angular时加载代理配置：要么执行ng serve --proxy-config proxy.conf.ts，要么在angular.json的projects.xxx.architect.serve.options中添加"proxyConfig": "proxy.conf.ts"。

4. 检查OPTIONS预检请求的响应 #

POST请求若包含自定义头或非简单类型的Content-Type，浏览器会先发OPTIONS预检请求：

• 打开浏览器控制台Network面板，查看OPTIONS请求的状态码。若返回403/404，说明网关未正确处理预检请求。
• 确保网关跨域配置中允许所有HTTP方法（包括OPTIONS），且路由规则未拦截OPTIONS请求。

5. 排查微服务端的拦截器/过滤器 #

部分微服务的自定义拦截器（如token校验、签名验证）可能对Angular发送的POST请求做了限制，但Postman因头信息不同能通过：

• 查看微服务的日志，确认POST请求是否到达控制器，还是在拦截器阶段被拦截。
• 检查拦截器逻辑，是否对Origin头、请求体格式做了额外校验。

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