Angular6 HttpClientModule带Header的POST请求无响应问题求助

嘿，我来帮你排查这个Angular 6 HttpClient的问题！你的代码里有几个和Angular 6+用法不匹配的细节，这大概率就是你拿不到响应的原因：

1. HttpClient会自动解析JSON，别再调用response.json()了 #

Angular 6及以上的HttpClient模块已经默认帮你把服务器返回的JSON响应解析成JavaScript对象了，你在map里写的response.json()完全是多余的——而且会报错！因为此时的response已经是解析好的对象，根本没有json()这个方法。

2. RxJS导入方式要适配Angular 6的版本 #

你用的是Angular 6，对应的是RxJS 6，现在的导入规则和旧版本不一样：

• Observable要从rxjs直接导入，而不是rxjs/Observable
• 不需要全局导入import 'rxjs/Rx';，按需导入需要的操作符即可（这里你甚至不需要map）

3. 删掉冗余的老模块导入 #

你导入了@angular/http里的Headers和RequestOptions，但这些是老版本Http模块的东西，你现在用的是HttpClient，完全用不上它们，删掉避免混淆。

4. 加上错误处理，才能知道请求为啥失败 #

你的subscribe只写了成功回调，没加错误回调！如果请求失败（比如网络问题、API报错、跨域限制），你根本看不到任何错误信息，没法排查问题。

修改后的代码参考 #

myservice.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs'; // 修正RxJS 6的导入方式
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {
  constructor(private http: HttpClient) { }

  getLogin(mobileNumber: string, loginPassword: string): Observable<any> {
    // 构造请求头
    const headers = new HttpHeaders()
      .set('Content-Type','application/json')
      .set('X-Authorization','clientmobileClient1')
      .set('username', mobileNumber)
      .set('password', loginPassword);

    // 直接返回post请求的Observable，不需要额外map处理
    return this.http.post('http://My API URL', null, { headers });
  }
}

mycomponent.ts

onSubmit() {
  // 替换成你实际的手机号和密码变量
  const mobileNumber = this.yourForm.get('mobile').value; 
  const loginPassword = this.yourForm.get('password').value;
  
  this.service.getLogin(mobileNumber, loginPassword).subscribe(
    (response: any) => {
      console.log("my response", response);
    },
    (error: any) => {
      // 新增错误处理，打印详细错误信息
      console.error('请求出错啦:', error);
    }
  );
}

额外排查建议 #

1. 打开浏览器开发者工具（F12）的Network标签，查看这个POST请求的状态码、响应内容，确认API本身是否正常返回数据
2. 如果出现跨域相关的报错（比如CORS错误），需要后端在API服务器配置CORS，允许你的前端域名访问

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