Angular 4中使用HttpClient Post请求报错：Http failure response 0 Unknown Error

这个错误我之前开发时也碰到过，大概率是跨域、请求配置或者API地址的问题，咱们一步步来排查和解决：

1. 先确认API地址是否有效 #

你代码里写的'link api'应该是占位符对吧？先检查这几点：

• 是不是完整的URL（比如https://your-api-domain.com/login），有没有漏写http/https前缀
• 后端服务是否正常启动，用Postman直接调用这个API能不能成功返回结果

2. 解决最常见的CORS跨域问题 #

浏览器的同源策略会阻止前端访问不同域名/端口的API，这是这个错误的高发原因。解决方式有两种：

方式一：后端配置CORS #

让后端开发在API接口上添加跨域支持，比如：

• Node.js Express：使用cors中间件
• Java Spring：在Controller类或方法上添加@CrossOrigin注解
• .NET：在Startup.cs里配置CORS策略

方式二：开发环境用Angular代理 #

如果是本地开发阶段，可以用Angular的代理配置绕过CORS：

1. 在项目根目录创建proxy.conf.json，内容如下：

{
  "/api/*": {
    "target": "https://your-real-api-domain.com",
    "secure": false,
    "changeOrigin": true
  }
}

2. 修改angular.json里的启动配置，添加代理文件引用：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build",
    "proxyConfig": "proxy.conf.json"
  }
}

3. 重启Angular开发服务器，然后请求地址改成/api/login（对应后端的https://your-real-api-domain.com/login）

3. 修正HttpHeaders的错误用法 #

HttpHeaders是不可变对象，调用append方法会返回一个新的实例，你原来的代码没有接收这个返回值，导致请求头其实是空的。正确写法有两种：

写法一：链式调用append #

Login(data): Observable<any> {
  const headers = new HttpHeaders()
    .append('Content-Type', 'application/json');
  return this.http.post('your-api-url', data, { headers: headers });
}

写法二：直接用对象初始化 #

Login(data): Observable<any> {
  const headers = new HttpHeaders({
    'Content-Type': 'application/json'
  });
  return this.http.post('your-api-url', data, { headers: headers });
}

4. 调整订阅的位置（最佳实践） #

服务层不应该直接subscribe请求，应该把Observable返回给组件，在组件里订阅，这样更灵活，也方便后续处理取消订阅、错误捕获等逻辑：

服务代码 #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
// ...其他导入

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) { }

  Login(data): Observable<any> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });
    return this.http.post('your-api-url', data, { headers: headers });
  }
}

组件代码 #

import { AuthService } from './auth.service';
// ...其他导入

@Component({
  // ...组件配置
})
export class LoginComponent {
  constructor(private authService: AuthService) { }

  onLogin(data: any) {
    this.authService.Login(data).subscribe(
      res => console.log('登录成功：', res),
      err => console.error('登录失败：', err)
    );
  }
}

5. 关于responseType: 'text'的使用 #

如果后端返回的不是JSON格式（比如纯文本），才需要设置这个参数，但要确保：

• 后端确实返回text类型的响应
• 后端CORS配置允许返回text/plain类型的内容

示例代码：

return this.http.post('your-api-url', data, { 
  headers: headers,
  responseType: 'text'
});

先按上面的步骤排查，大概率能解决问题～

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