Блог

У меня есть интерфейс 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 из res.json() Я нашел это:

ответ

Если я вызываю /login от PostMan, я получаю правильный ответ 200:

{ «logged»: «true» }

Может ли это быть проблемой cors? Что-то о типе содержимого?

У вас есть какие-либо идеи?

Спасибо

Прежде всего, вы можете упростить код этой конечной точки, просто прикрепив HttpCode декоратора (HttpStatus.ОК) на конечной точке и возвращает нужные данные

 @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 для этого обещания для обработки ошибок. Если запрос выполнен успешно, не забудьте изменить источник: ‘*’ на источник, внесенный в белый список, потому что с помощью этой строки вы разрешаете доступ к своему бэкэнду отовсюду, и вы будете принимать только эти заголовки.