Angular 无法从Ionic应用程序向NestJS后端发送POST请求_Angular_Typescript_Ionic Framework_Rxjs_Nestjs

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

angular typescript ionic-framework rxjs nestjs

Angular 无法从Ionic应用程序向NestJS后端发送POST请求,angular,typescript,ionic-framework,rxjs,nestjs,Angular,Typescript,Ionic Framework,Rxjs,Nestjs,我设置了一个简单的Ionic 5应用程序和一个NestJS后端。现在，我想将POST请求从应用程序发送到后端，但在浏览器控制台中始终会收到以下错误消息：对象{头：{…}，状态：500，状态文本：“内部服务器” 错误“，url:”，确定：false，名称：“HttpErrorResponse”，消息：“Http失败响应：500内部服务器错误”，错误： {…}home.page.ts:36:14 在我的NestJS后端，我收到以下错误消息： Request URL: http://localho

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

对象{头：{…}，状态：500，状态文本：“内部服务器” 错误“，url:”，确定：false，名称：“HttpErrorResponse”，消息：“Http失败响应：500内部服务器错误”，错误： {…}home.page.ts:36:14

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

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"}

@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
        })
    }
...

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

  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));
  }

[Nest]18696-03/27/2020，上午10:39:04[ExceptionHandler]用户验证失败：密码：需要路径

密码，用户名：
路径username
是必需的，电子邮件：路径Email是必需的+
43794ms
在浏览器的“网络”选项卡中，我收到一个状态代码为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"}

@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
        })
    }
...

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

  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));
  }

所需参数也已正确发送：
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"}

@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
        })
    }
...

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

  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));
  }

我的POST请求控制器的结构如下：
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"}

@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
        })
    }
...

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

  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));
  }

使用的DTO如下所示：
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"}

@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
        })
    }
...

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

  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));
  }

CORS也在我的NestJS后端激活。此外，有趣的是GET请求（通过Ionic以及邮递员或直接输入浏览器）可以工作。如果我通过邮递员或直接将其输入浏览器，POST请求也可以工作
我在Ionic应用程序中以这种方式测试POST请求：
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"}

@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
        })
    }
...

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

  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));
  }

ngOnInit（）{
this.createAccount（this.createUserDto）.subscribe（（res）=>{
log（'Request send'，res）；
}，（错误）=>{
console.log（'Failed'，err）；
});
}
createAccount（凭证）：可观察{
返回此.http.post（'http://localhost:3000/api/users，JSON.stringify（凭证））；
}

同样有趣的是，当我删除JSON.stringify（凭据）并只输入没有JSON.stringify（）的凭据时，请求没有被发送
这里我做错了什么？
如果您的“凭证”是一个具有正确接口的对象，那么只需按原样发送它，而不使用JSON.stringify（）即可
我假设credencitial有这样的东西：
const credentials = {
    email: 'foo@bar.biz',
    username: 'username',
    password: 'some_password',
}

然后对您的observable进行一些更改，以获取用户数据并正确捕获错误：
createAccount（凭证）：可观察



我希望它对你有用！祝你好运
 可能是选择了错误的httpclient.post
重载。尝试直接将内容类型指定为json，并尝试在不使用json.stringify（）
的情况下使其正常工作。它应该在没有JSON.stringify（）的情况下工作。
<代码>this.http.post（'http://localhost:3000/api/users，凭据，{headers:new-HttpHeaders（{'Content-Type'：'application/json'}）}）
Nope，仍然不起作用。正文不会传递到我的后端，如果没有JSON.stringify（）方法，请求将无法工作。HttpClient是从“@angular/common/http”导入的。我还添加了u建议的标题..怎么能不发送请求？关于飞行前选项
请求，您是否收到CORS错误？不，我只是收到问题中列出的错误。如果我将主体记录在我的NestJS控制器中，比如console.log（'body'，createUserDto）；它说：body CreateUserDto{}。下面是上面列出的错误a。因此，发送给控制器的主体是Emply，但在浏览器的网络选项卡中，主体是存在的。如果我在我的ionic应用程序中登录，也可以。谢谢你的回答。“凭证”是一个使用正确接口的对象，但如果我使用或发送它时不使用JSON.stringify（），则请求不会发送到后端。使用JSON.stringify（）时请求到达后端。正如我在问题中提到的：通过邮递员或在浏览器中键入端点url，一切都正常。那么“Purch”到底在做什么？真的需要吗？当您使用http.post（url，body）发出请求时正文发送到后端时正在转换为有效的Json，无需转换为Json。查看更多信息[单击此处]（）.您是对的，Pull不是必需的，它是一个可选操作符，用于从API响应获取用户。好的，但正如我前面提到的。如果我删除stringify方法，则请求不会发送，并且浏览器开发工具的网络点击中不会发生任何事情。