#reactjs #express #nestjs #httpresponse
#reactjs #экспресс #nestjs #httpresponse
Вопрос:
У меня есть интерфейс 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? Что-то о типе содержимого?
У вас есть какие-либо идеи?
Спасибо
Ответ №1:
Прежде всего, вы можете упростить код этой конечной точки, просто прикрепив 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 для этого обещания для обработки ошибок. Если запрос выполнен успешно, не забудьте изменить источник: ‘*’ на источник, внесенный в белый список, потому что с помощью этой строки вы разрешаете доступ к своему бэкэнду отовсюду, и вы будете принимать только эти заголовки.
Комментарии:
1. Исправлено: app.EnableCors({ источник: ‘ localhost:8100 ‘, методы: ‘GET, POST’, разрешенные заголовки: ‘Content-Type, Accept, Access-Control-Allow-Headers, Авторизация’, учетные данные: true });