ReactJs 前端调用 NestJs 后端空响应

Question

我有一个 ReactJs 前端 (localhost)，我从中调用 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() 的 res.json() 中我发现了这个：

response

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

{ “记录”：“真实” }

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

你有什么想法吗？

谢谢

Answer 1

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

@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: '*' 更改为您列入白名单的来源，因为通过该行，您可以从任何地方访问后端，并且您只会接受这些标头。