Angular7项目HTTP GET请求失效，配置必填请求头仍异常

我来帮你排查这个问题，从你的代码和报错信息来看，主要有两个关键问题需要解决，咱们一步步来：

1. 首先修正HttpHeaders的配置错误 #

Angular的HttpHeaders是不可变对象，调用append()方法后会返回一个新的Headers实例，而不是修改原对象。你原来的代码只是调用了append()但没有把返回值赋值给变量，导致实际发送请求时并没有携带你设置的自定义头。

修改后的service.ts代码可以这样写：

getUserProfile(){
  let url = '.....'
  // 方式1：链式调用append，直接生成带请求头的实例
  const httpHeaders = new HttpHeaders()
    .append('api-client', 'x')
    .append('api-date', 'x');
  
  // 方式2：创建时直接传入请求头对象（更简洁）
  // const httpHeaders = new HttpHeaders({
  //   'api-client': 'x',
  //   'api-date': 'x'
  // });

  const options = {headers: httpHeaders};
  return this.http.get(url, options);
}

2. 排查CORS跨域问题 #

你控制台里的status: 0错误是典型的浏览器跨域限制导致的。Postman不受浏览器同源策略约束，所以能正常请求，但前端在浏览器环境下发起请求时，必须后端配合配置CORS规则：

• 后端需要允许你的前端域名（比如本地开发的http://localhost:4200）进行跨域访问
• 后端需要明确允许携带api-client和api-date这两个自定义请求头
• 后端需要允许GET请求方法

如果修正Headers配置后还是报错，建议联系后端同事确认CORS配置是否正确，或者在后端测试环境中添加对应的跨域规则。

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