无法将 POST 请求从 Ionic 应用程序发送到 NestJS 后端

Question

我设置了一个简单的 Ionic 5 应用程序和一个 NestJS 后端。现在我想从我的应用程序向我的后端发送一个 POST 请求，但我总是在浏览器控制台中收到以下错误消息：

对象 {headers: {…}, status: 500, statusText: "Internal Server 错误”，网址：“http://localhost:3000/api/users”，确定：假， 名称：“HttpErrorResponse”，消息：“http://localhost:3000/api/users 的 Http 失败响应：500 内部服务器错误”，错误： {…}} home.page.ts: 36: 14

在我的 NestJS 后端中，我收到以下错误消息：

[Nest] 18696 - 03/27/2020, 10:39:04 AM [ExceptionsHandler] 用户 验证失败：密码：路径 password 是必需的。，用户名： 路径username 为必填项。电子邮件：路径email 为必填项。 + 43794毫秒

在浏览器的网络选项卡中，我收到状态代码为 500 的错误（内部服务器错误）：

Request URL: http://localhost:3000/api/users
Request method: POST
Remote address: 127.0.0.1: 3000
Status code:
500
Version: HTTP / 1.1
Referrer Policy: no-referrer-when-downgrade

所需的参数也正确发送：

{"email":"test@test.de","username":"testname","password":"testpassword"}

我的 POST 请求的控制器结构如下：

@Controller('/users')
export class UsersController {
    constructor(private usersService: UsersService) { }

    // POST request containing the data required to create a new user
    @Post()
    async createUser(@Res() res, @Body() createUserDto: CreateUserDto) {
        console.log('body', createUserDto);

        const user = await this.usersService.create(createUserDto);
        if (!user) throw new InternalServerErrorException('User could not be created!');
        return res.status(HttpStatus.OK).json({
            message: "User has been created successfully",
            user
        })
    }
...

使用的 DTO 如下所示：

export class CreateUserDto {
    readonly email: string;
    readonly username: string;
    readonly password: string;
}

CORS 在我的 NestJS 后端也被激活。此外，有趣的是 GET 请求（通过 Ionic 以及通过 Postman 或直接输入到浏览器）工作。如果我通过 Postman 发出 POST 请求或直接将它们输入到浏览器中，POST 请求也可以工作。

我在 Ionic 应用程序中以这种方式测试 POST 请求：

  ngOnInit() {
    this.createAccount(this.createUserDto).subscribe((res) => {
      console.log('Request send', res);
    }, (err) => {
      console.log('Failed', err);

    });
  }

  createAccount(credentials): Observable<any> {
    return this.http.post('http://localhost:3000/api/users', JSON.stringify(credentials));
  }

当我删除 JSON.stringify(credentials) 并只输入 credentials 而没有 JSON.stringify() 时，请求没有发送也很有趣。

我在这里做错了什么？

Answer 1

如果您的“凭证”是一个具有正确接口的对象，那么只需按原样发送它，而无需 JSON.stringify() 它。

我假设凭证有这样的东西：

const credentials = {
    email: 'foo@bar.biz',
    username: 'username',
    password: 'some_password',
}

然后对您的 observable 进行一些更改以获取用户数据并正确捕获错误：

 createAccount(credentials): Observable<any> {
    return this.http.post('http://localhost:3000/api/users', credentials)
        .pipe(
           pluck('user'),
           catchError(err => {
            return throwError(err);
           })
        )
  }

确保导入 rxjs 运算符“pluck”和“catchError”以及可观察到的“throwError”。

有关这些运算符的更多信息：

• CatchError
• Pluck
• ThrowError

我希望它对你有用！祝你好运！