Angular调用Node接口时HTTP请求响应res.status为undefined问题咨询

Angular 内置的 HttpClient 默认仅返回接口响应的响应体内容，也就是你后端代码中 res.send() 传入的对象（比如 {message: 'successfully logged in'}），该对象本身不含 status 字段，所以你读取 res.status 自然会得到 undefined。
同时 HttpClient 默认会将 4xx、5xx 类的 HTTP 状态码判定为请求异常，只会走 subscribe 的 error 回调，不会走成功回调，你原有代码里的 else 分支永远不会触发。

第一步：修改服务请求配置，获取完整响应对象 #

给 http.post 方法添加 observe: 'response' 配置，即可拿到包含 status、headers、body 在内的完整 HTTP 响应对象：

tryLogin(data : any){
  // 扩展原有options，新增observe配置项
  return this.http.post(environment.server + environment.routes.authRoutes.login, data, {...this.options, observe: 'response'})
}

第二步：修改组件回调逻辑，拆分成功/异常处理 #

将异常状态的判断放到 error 回调中处理：

submit(){
  this.auth.tryLogin(this.form.getRawValue())
  .subscribe(res => {
    console.log(res);
    if(res.status === 200){
      // 成功跳转
      this.router.navigate(['/'])
      // 如果要取后端返回的message，从res.body中获取：console.log(res.body.message)
    }
  }, err => {
    // 非2xx状态码都会走这个回调，直接读取err.status拿到状态码
    alert(err.status)
    // 同样可以通过err.body.message拿到后端返回的错误提示
  })
}

如果不需要读取原生HTTP状态码，也可以和后端约定在响应体中新增业务码字段，比如后端返回：

return res.status(200).send({
  code: 200,
  message: 'successfully logged in'
});

前端无需修改请求配置，直接读取 res.code 判断即可，更符合前后端接口交互的常规做法。

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