ReactJs 前端调用 NestJs 后端空响应

Question

我有一个 ReactJs 前端（本地主机），我从中调用 NestJs 后端：

fetch("http://myappherokuapp.com/user/login", {
        method: "POST",
        mode: 'no-cors',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'application/json'
        },
        body: encodedToken
    })
    .then(res => res.json())
    .then(
      (result) => {
        console.log(result);
      },
      (error) => {
        //TODO
      }
    );

这是 NestJs 后端控制器：

@Controller('user')
 
//init...

@Post('login')
async login(@Res() res, @Body() userLoginDto: UserLoginDto) {
    return res.status(HttpStatus.OK).json({
                logged: 'true'
            }); 
}

在浏览器开发者控制台中，检查响应“加载响应数据失败”，在 res.json() 的资源中我发现了这个：

response

如果我从 PostMan 调用 /login，我会收到正确的 200 响应：

{ “记录”：“真实” }

会不会是cors的问题？关于内容类型？

你有什么想法吗？

谢谢

Answer 1

首先，您可以简化该端点的代码，只需在端点上附加装饰器 HttpCode(HttpStatus.OK) 和 return 您想要的数据

@Post('login')
@HttpCode(HttpStatus.OK) // Or @HttpCode(200)
async login(@Body() userLoginDto: UserLoginDto) {
    return { logged: 'true' }; 
}

要检查问题是否由 cors 引起，请在您的 main.ts

中添加此行

app.enableCors({
    origin: '*',
    allowedHeaders:
      'Content-Type, Access-Control-Allow-Headers, Authorization',
});

然后运行你的代码，你还必须在该承诺上添加一个 catch 表达式来处理错误。如果请求成功，请记住将 origin: '*' 更改为您的白名单来源，因为通过该行，您可以从任何地方访问您的后端，并且您将只接受那些 headers.

ReactJs 前端调用 NestJs 后端空响应

ReactJs frontend calling NestJs backend empty response

httpresponse

express

reactjs

nestjs