Angular向Spring Boot发起POST请求时出现status 0的HttpErrorResponse错误

看起来你遇到的是Angular跨域POST请求被中止的问题，status 0通常和CORS预请求失败、请求未正确通过代理转发有关。结合你给出的代码，我来帮你一步步排查和解决：

1. 移除Angular请求中多余的Access-Control-Allow-Origin请求头 #

你在Angular服务里的headers设置了Access-Control-Allow-Origin: *，但这个是服务器返回给前端的响应头，不是前端请求需要携带的。前端请求里带这个头会触发浏览器的预请求（OPTIONS）验证，反而可能导致Spring Boot的CORS配置无法正确处理。

修改你的Angular服务代码：

@Injectable({
  providedIn: 'root'
})
export class ChordService {
  // 用代理的话，改成相对路径/api/即可，不需要写完整域名
  url: string = "/api/";
  // 只保留Content-Type，移除多余的Access-Control-Allow-Origin
  headers = new HttpHeaders().set('Content-Type', 'application/json');

  constructor(private httpClient: HttpClient) { }

  getAllChordsInScale(scale : String, modality: String): Observable<any> {
    return this.httpClient.get(`${this.url}getAllChordsInScale/${scale}/${modality}`, { headers: this.headers });
  }

  getTrasposedChords(scale: String, chordList: Chord[]): Observable<any> {
    // HttpClient会自动序列化body为JSON，不需要手动调用JSON.stringify
    return this.httpClient.post(`${this.url}changeScale/${scale}`, chordList, { headers: this.headers });
  }
}

2. 修复Angular代理配置的启动命令 #

你在package.json的start命令里用了中文长破折号—，这会导致Angular CLI无法识别proxy-config参数，代理配置完全不生效，请求还是直接发送到8081端口，无法通过代理转发规避跨域问题。

修改package.json里的start命令：

"start": "ng serve --proxy-config proxy.conf.json"

同时完善proxy.conf.json的配置（确保和package.json同目录）：

{
  "/api": {
    "target": "http://localhost:8081/chordproject",
    "secure": false,
    "changeOrigin": true
  }
}

这里注意要加上/chordproject上下文路径，和Spring Boot应用的路径匹配；changeOrigin: true能避免跨域时的主机头校验问题。

3. 优化Spring Boot的CORS配置（可选但推荐） #

虽然你给每个接口加了@CrossOrigin，但全局配置CORS会更统一，也能避免单个接口配置遗漏的问题。创建一个全局CORS配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

配置完成后，就可以移除每个接口上的@CrossOrigin注解，全局配置会自动生效。

4. 验证请求是否正常转发 #

启动Angular应用后，打开浏览器开发者工具（F12）的Network标签页：

• 正常通过代理的请求，URL应该是http://localhost:4200/api/changeScale/...，而非直接指向8081
• 查看响应头是否包含Access-Control-Allow-Origin: http://localhost:4200，确认CORS配置生效

按照以上步骤修改后，重启Angular和Spring Boot应用，再测试POST请求应该就能正常返回结果了。

备注：内容来源于stack exchange，提问作者Luca Mastrofini