Angular HTTP调用API遇CORS问题：ngOnInit正常按钮点击报错

核心问题排查 #

1. 请求URL不一致：
   ngOnInit中调用的是this.productUrl + "?resultsLimit=2"，但错误日志里的请求URL是https://xxxxxx.yourtechnicaldomain.com/api/admin/v3/products/descriptions?type=id&ids=10，两者路径明显不同。这说明按钮点击时，getProducts函数实际请求的URL已被修改，导致服务器返回404；而404响应未携带CORS允许头，进而触发浏览器的CORS报错。

2. 前端错误设置CORS响应头：
   你在请求头里添加的Access-Control-Allow-Headers、Access-Control-Allow-Methods、Access-Control-Allow-Origin都是服务器端需要返回的响应头，前端在请求中携带这些头完全无效，反而可能让服务器误解请求，甚至拒绝处理。

具体修复步骤 #

• 修正请求URL一致性：
  检查productUrl变量在按钮点击前是否被意外修改，确保getProducts函数每次调用时使用的URL和ngOnInit中一致。可以在函数开头打印URL确认：

  getProducts() {
    console.log('当前请求URL:', this.productUrl + "?resultsLimit=2"); // 确认URL是否正确
    this.http.get(this.productUrl + "?resultsLimit=2", { headers: this.header4 })
    // ... 剩余代码
  }
  

• 清理无效请求头：
  移除请求头中属于服务器响应的字段，只保留必要的x-api-key：

  header4 = new HttpHeaders({
    'x-api-key': this.key
  });
  

• 排查404根源：
  如果确认URL正确仍返回404，需核对API文档，确认请求路径、参数是否符合服务器要求。比如错误中的/products/descriptions路径是否存在，type=id&ids=10参数是否合法。

• 确认CORS配置有效性：
  既然ngOnInit中的请求能成功，说明服务器对该URL的CORS配置正常。按钮点击时的报错本质是404导致的CORS提示，解决404问题后CORS报错会自动消失。

额外建议 #

• 将HTTP请求逻辑封装到独立服务中，避免组件直接处理HTTP请求，减少状态混乱的可能。
• 使用Angular的HttpClient时，建议通过HttpParams传递查询参数，避免字符串拼接出错：

  import { HttpParams } from '@angular/common/http';
  
  // ...
  
  getProducts() {
    const params = new HttpParams().set('resultsLimit', '2');
    this.http.get(this.productUrl, { headers: this.header4, params })
    .pipe(catchError(this.handleError))
    .subscribe(data => {
       this.listaProduktow = data;
       console.log(data);
     });
  }
  

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