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 of res.json()中我发现了这个:

反应

如果我从PostMan调用/login，我收到一个正确的200响应:

{"logged"true"}

这可能是一个错误吗?关于内容类型?

你有什么想法吗?

谢谢

Answer 1

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

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

要检查问题是否由错误引起，请在main.ts

中添加这一行

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

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