회원가입 오류입니다!

맛집 지도앱 만들기 (React Native + NestJS)

[3-8] React Query 도입(2) - 로그인 연동하기

해결된 질문

24.05.23 00:54 작성

377

일단 회원가입시 400 에러가 발생 합니다 !

리퀘스트 인터셉터 에러 내용

{"adapter": ["xhr", "http", "fetch"], "baseURL": "http://localhost:3030", "data": {"email": "ajrfysd@naver.com", "password": "gsas22sgda"}, "env": {"Blob": [Function Blob], "FormData": [Function FormData]}, "headers": {"Accept": "application/json, text/plain, */*"}, "maxBodyLength": -1, "maxContentLength": -1, "method": "post", "timeout": 0, "transformRequest": [[Function transformRequest]], "transformResponse": [[Function transformResponse]], "transitional": {"clarifyTimeoutError": false, "forcedJSONParsing": true, "silentJSONParsing": true}, "url": "/auth/signup", "validateStatus": [Function validateStatus], "withCredentials": true, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN"}

리스폰스 인터셉터

[AxiosError: Request failed with status code 400]

email, password로그도 잘 찍히고 하는데 왜 400이

발생하는지 모르겠습니다..ㅠㅠ

서버쪽 같기도 한데 잘 모르겠네요..

postgresql에 테이블도 잘 생성 되어 있고

npm run start:dev

Application] Nest application successfully started +2ms
http://localhost:3030

크롬에서 3030 으로 요청시 로그에 내줄 index.html

없다고 하는거 보니 작동 하는것 같긴 한데...

이상하게 Postman 에서는 couldnot send 나오고...

/auth/signup도 마찬가지고...

다른 부분은 confirmPassword를 제가 rePassword로

바꾸었는데 보내는 쪽에서도 비밀번호확인은 안보내는것

같고 받는 쪽에서도 아예 안받는것 같은데..

혹시 위 내용으로 추측 가능한 부분이 있을까요??

react-native typescript nestjs react-query zustand

답변 4

ajrfyd

질문자

2024. 05. 24. 20:46

어디가 잘못되었는지 확인 차 웹에서도 테스트 해 보았습니다ㅠ

말씀대로 특수문자가 문제 였네요 ...이제야 201제대로 떨어지네요..흐미..ㅋㅋ

ajrfyd

질문자

2024. 05. 24. 19:38

제가 React에서 이렇게 요청을 보냈는데

const getData = async () => {
    const result = await axios.post(
      "http://localhost:3030/auth/signup",
      {
        email: "aj@naver.com",
        password: "rkskekfkakqk#",
      },
      {
        headers: {
          "Content-Type": "application/json",
        },
        withCredentials: true,
      }
    );
    console.log(result);
  };

  useEffect(() => {
    getData();
  }, []);

cors가 발생하여 Server/main.ts 주석 제거 하고

다시 요청 했음에도


AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

에러가 발생하네요ㅠㅠ

서버 코드를 다른것을 ㅅ사용하고 있는 것일까요??ㅠ

Kyo

지식공유자

2024. 05. 24. 20:25

앱이아니라 웹으로 하고계시나요..?

제강의는 웹강의가 아닙니다. 웹으로 할경우 enableCors설정해주셔야하고 웹에서 제 인증관련코드 그대로 쓰시면 안됩니다. 그리고 패스워드에서 특수문자는 제거해보시겠어요? 백에서 영어나숫자 조합으로 체크하고있어서요.

Kyo

지식공유자

2024. 05. 23. 01:05

코드가없어서 정확히 모르겠지만 api, hook, 회원가입screen쪽 코드에 문제가없는지 확인해보셔야할것같아요. 강의코드와 비교해보시겠어요?

ajrfyd

질문자

2024. 05. 23. 07:05

/* axios.ts */
export const axiosInstance = axios.create({
  baseURL: 'http://localhost:3030',
  withCredentials: true,
});

/* auth.ts */
export const postSignup = async ({
  email,
  password,
}: RequestUser): Promise<void> => {
  const {data} = await axiosInstance.post('/auth/signup', {
    email,
    password,
  });
  return data;
};
/* hooks/useAuth/useSignup */
export const useSignup = (mutationOptions?: UseMutationCustomOptions) => {
  return useMutation({
    mutationFn: postSignup,
    ...mutationOptions,
  });
};
/* loginScreen */
const signup = useForm({
    initialValue: {
      email: '',
      password: '',
      rePassword: '',
    },
    validate: validateSignup,
  });

  const handleSubmit = () => {
    const {email, password} = signup.form;
    console.log(email, password);
    signupMutation.mutate(signup.form, {
      onSuccess: () =>
        loginMutation.mutate({
          email,
          password,
        }),
    });
  };

음 천천히 다시 보았는데 안보이네요ㅠㅠ

nest쪽 로깅을 어떻게 해야 할까요 ㅠㅠ

auth.controllers.ts / auth.service.ts 쪽 로그가

전혀 찍히지 않네요 ㅠ

route를 전혀 타지 않는것 같기도 하고...

express랑 좀 많이 다르네요..

인프런 AI 인턴

2024. 05. 23. 00:56

안녕하세요, 인프런 AI 인턴입니다. ajrfyd님께서 겪고 계신 회원가입 시 400 에러 문제를 해결하기 위해 관련 내용을 검토했습니다.

400 에러는 대부분 클라이언트 측에서 전송하는 데이터의 형식이 서버의 기대와 일치하지 않거나 필요한 데이터가 빠졌을 때 발생합니다. ajrfyd님의 경우, 이메일과 패스워드는 문제가 없는 것으로 보이며, confirmPassword와 rePassword 관련 언급이 있어 해당 부분에 문제가 있을 가능성이 높아 보입니다.

문제 해결을 위해 비슷한 상황에서 질문과 답변을 찾아보았고, 회원가입 과정에서 비슷한 문제를 겪었던 다른 사용자의 사례를 찾았습니다:

회원가입 버튼 클릭 시 아무런 반응이 없습니다.. 질문 링크는 회원가입 과정에서 사용자가 마주한 문제와 관련하여 지식공유자분께서 제공한 답변을 담고 있습니다. 이 경우, 서버 측 로직이나 프론트엔드의 요청 데이터 확인, 클라이언트와 서버 간의 정확한 데이터 통신이 중점적으로 다루어졌습니다.

ajrfyd님의 경우는 서버 측 로그에는 문제가 없어 보이나, 클라이언트 측에서 데이터를 전송할 때 400 에러가 발생하는 부분, 특히 rePassword와 관련한 파트에서의 문제일 수 있습니다. 서버 측에서 요구하는 필드 이름과 클라이언트 측에서 전송하는 필드 이름이 정확히 일치하는지, 그리고 모든 필수 필드가 제대로 전송되고 있는지 확인해보시는 것이 좋겠습니다.

또한, Postman을 사용할 때 “could not send” 문제가 발생하는 경우는 URL 형태나 서버 연결에 문제가 있을 수 있으니, URL이 정확하며 서버가 정상적으로 실행되고 있는지 함께 확인해 보시기 바랍니다. http://localhost:3030/auth/signup 주소가 정확히 서버와 일치하는지, 서버는 정상적으로 작동하고 있는지 확인하는 것도 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변