使用 Angular + Express 发出 POST 请求时取回空响应正文答案

【问题标题】：Getting back empty response body when making a POST request using Angular + Express使用 Angular + Express 发出 POST 请求时取回空响应正文
【发布时间】：2019-02-16 05:49:11
【问题描述】：

我正在尝试发出一个简单的 POST 请求，但我从服务器收到了一个空响应。我已经筛选了有关此主题的所有 SO 问题，并尝试了发布的解决方案，但无济于事。

我尝试将请求标头选项更改为使用 'application/x-www-form-urlencoded'，并将我的 express 应用中的 bodyParser 设置为 app.use(bodyParser.urlencoded({ extended: true }));，但这也不起作用。

auth-service.service.ts

login(loginInfo: object) {
    return this.http.post<loginInfo>(this.loginUrl, { "test": "test" })
    .pipe(
        catchError(this.handleError)
    );
 }

 private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
       console.log('An error occured:', error.error.message);
    } else {
       console.log(`Backend returned code ${error.status}, ` +
      `body was ${error.error}`);
    }

    return throwError('Something bad happened; please try again later.')
 }

login.component.ts（调用登录服务方法）

onSubmit() { 
    const loginInfo = { username: this.username.value, password: this.password.value };
    this.authService.login(loginInfo).subscribe(
         resp => { console.log(resp); },
         err => { console.log(err); }
  )
}

server.js（我在这里定义了路由，但它们不相关）

const express = require('express');
const bodyParser = require('body-parser');
const api = require('./routes/api');

const app = express();
const port = process.env.port || 3000;

app.use((req, res, next) => {
     res.setHeader('Access-Control-Allow-Origin', '*');
     next();
})
app.use(bodyParser.json());

app.use('/api', api)
app.get('/', function (req, res) {
     res.send(JSON.stringify('Hello from server'));
})

app.post('/login', (req, res) => {
     let userData = req.body
     res.send('Request body: ' + JSON.stringify(userData));
})


app.listen(port, function () {
     console.log('Server running on localhost: ' + port);
 });

我正在控制台记录以下内容：

Backend returned code undefined, body was undefined

Something bad happened; please try again later.

但是，当我尝试使用 Postman 时，我得到了预期的响应（即Request body: {}）

我不确定为什么通过 Postman 完成时会检索到响应，但通过应用程序完成时却没有。

感谢任何帮助。谢谢！

【问题讨论】：

我能在浏览器中看到你的网络调用吗，我想看看请求头。
@BhushanBabar 网络中没有显示任何内容。我也很困惑为什么会这样。抱歉，我对 Angular 中的 http 调用很陌生，所以我可能遗漏了一些非常明显的东西。
你的角度版本是什么，我建议你先尝试使用简单的代码，我的意思是删除你用于错误处理的pipe，删除返回类型post<loginInfo>，试试你的用非常简单的代码编写代码，我什至会说，为了让服务本身更简单地订阅并控制结果，如果你没有看到网络调用，你应该放一个调试器来看看你的服务代码是否可以访问。
@BhushanBabar 我正在使用 6.2.9。我会试试你的建议，看看我能不能解决它。谢谢。

标签： node.js angular express

【解决方案1】：

您需要在auth-service.service.ts 中为POST 请求设置body：

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

login(loginInfo: object) {
  const body = new HttpParams()
    .set('test', 'test');
  return this.http.post<loginInfo>(this.loginUrl, body)
    .pipe(
      catchError(this.handleError)
    );
}

【讨论】：

感谢您的评论。这似乎无法解决问题。
@JacobL 你的应用中有角度拦截器吗？
不，我没有（抱歉，回复冗长，回复最少 15 个字符）

【解决方案2】：

尝试使用缺少的 express.json

app.use(express.json());

和

app.use(bodyParser.urlencoded({
    extended: true
}));

【讨论】：