Angular 5 HttpClient/Http POST请求无法命中服务器求助

我来帮你拆解下这两种Angular 5写法的问题，以及对应的修复方案：

第一种写法（基于Http模块）的问题 #

• 多余的processData头：processData是jQuery Ajax特有的配置项，Angular的Http模块完全不需要这个参数，你把它放到请求头里属于无效配置，甚至可能导致服务器拒绝请求。
• 未订阅Observable：Angular的HTTP请求是冷Observable——仅仅调用.map()不会触发实际的网络请求，必须调用.subscribe()才能让请求发送出去。
• 没必要的手动序列化：Http模块会自动把传入的对象序列化为JSON字符串，你手动JSON.stringify()反而画蛇添足，甚至可能引发服务器解析异常。

修复后的代码： #

import { Http, Headers, RequestOptions } from '@angular/http';

// ...

let header = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: header });
this.http.post('/token', { Id: "test", Password: "test" }, options)
  .map(response => response.text()) // 如果服务器返回的是纯文本Token用text()，返回JSON则用json()
  .subscribe(
    token => console.log("token =" + token),
    error => console.error("请求失败:", error)
  );

第二种写法（基于HttpClient模块）的问题 #

• 未订阅Observable：和第一种问题一样，HttpClient的请求也是冷Observable，不调用.subscribe()的话，请求根本不会发送到服务器。
• observe: 'response'的误解：设置这个配置后，HttpClient会返回完整的HttpResponse对象，而不是直接返回响应体内容。如果你的服务器返回的是纯Token字符串，需要从response.body中提取值，而不是直接使用整个response对象。
• 多余的Content-Type配置：HttpClient默认会自动将请求体对象序列化为JSON，并自动设置Content-Type: application/json，手动添加这个头属于冗余操作。

修复后的代码： #

import { HttpClient } from '@angular/common/http';

// ...

// 推荐写法：直接获取响应体
this.httpClient.post<string>("/token", { Id: "test", Password: "test" })
  .subscribe(
    token => console.log("token =" + token),
    error => console.error("请求失败:", error)
  );

// 如果需要获取完整响应（比如读取响应头），可以保留observe配置：
this.httpClient.post<string>("/token", { Id: "test", Password: "test" }, { observe: 'response' })
  .subscribe(
    response => console.log("token =" + response.body),
    error => console.error("请求失败:", error)
  );

额外提示 #

在Angular 5中，Http模块已经被标记为废弃，官方推荐使用HttpClient模块，所以更建议采用第二种修复后的写法。

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