인프런 커뮤니티 질문&답변
작성한 질문수
nestjs와 프론트 연동 질문드립니다.
작성
·
714
0
nestjs랑 nextjs를 사용하여 로그인 기능을 만들고 있습니다.
nestjs의 validation을 사용해서 @IsEmail이 아닌 경우 예외처리를 하게 만들어주었습니다. postman에서는 message가 잘 뜨는데 프론트엔드에서 console.log(error)로 찍어보면 postman에서 response으로 받은 값이 없습니다. 프론트에서도 postman처럼 response값을 받으려면 어떻게 해야하나요? 
<프론트>
<서버>
<dto>
<postman>
<브라우저>
답변 2
0
안녕하세요! dalim508님!
위에 질문주신 내용으로 보아, CORS 문제가 발생하고 있는 것 같아요!
따라서, 이는 백엔드 API에 요청이 도달하여, email이 형식에 맞지 않아 에러를 받게 된 것이 아니라,
CORS문제로 인하여 보안상 백엔드API에서 요청을 허락하지 않은 경우라고 보시면 될 것 같아요!
email 검증은 그 다음얘기가 되겠죠?!^^
따라서, 백엔드단 설정에서 해당 브라우저 주소에 대해서 CORS설정을 허락해 주셔야한답니다!
CORS에 대한 자세한 내용은 수업때 진행하므로 해당 수업을 참고해 주세요!
여기서 잠깐! 궁금한 점이 있으실 수 있는데,
왜 postman은 문제가 발생하지 않고, 내 브라우저에서만 문제가 발생하는가?
CORS는 CrossOriginResourceSharing의 약자로 크로스오리진(서로다른주소)간에 데이터를 주고받을때 필요한 정책이에요! 따라서, curl, postman, 등의 요청 주소가 없는 프로그램들에 대해서는 문제가 발생하지 않기 때문이랍니다!^^
서버 코드입니다.0
안녕하세요 dalim508님, 인프런 AI 인턴이에요.
프론트엔드에서도 postman처럼 response 값을 받으려면 fetch, axios, XMLHttpRequest 등을 사용하여 백엔드 API에 요청을 보내고 응답을 받아야 합니다. 응답을 받으면 그 값을 처리할 수 있습니다.
강의 내용과 관련하여 예외처리에 대한 코드를 확인하려면 코드나 해당 부분을 더 자세히 확인할 필요가 있습니다. 확인해야 할 코드는 다음과 같습니다.
1. 프론트엔드에서 백엔드 API에 요청을 보내는 코드
2. 백엔드에서 해당 요청을 처리하는 컨트롤러 코드
3. 예외 처리를 수행하는 코드
오류 메시지가 프론트엔드에서 정확하게 출력되지 않는 경우, 백엔드에서 예외 처리가 정상적으로 동작하지 않을 수 있습니다. 코드를 조금 더 자세히 살펴보고 문제를 해결할 수 있도록 노력해보세요. 필요하다면 실제 코드를 확인하고 도움을 드릴 수 있습니다.
감사합니다.
반대로, 이메일 형식에 맞게 axios를 보내주면 cors문제가 생기지 않고 토큰이 발급됩니다.
프론트와 백 둘 다 credential true와 nestjs에는 enablecors를 적용시켰습니다.
이메일 형식에 맞지 않을 때 postman처럼 response를 받을 수 없나요?