백엔드에 요청을 보내면 Network Error가 발생합니다

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

해결된 질문

작성

241

수정됨

안녕하세요. 지금 강의 3-8을 들으면서 회원가입, 로그인 요청을 보내는 코드를 작성 중입니다.
다름아니라 회원가입 등 백엔드에 요청을 보내면 백엔드 서버까지 요청이 전달되지 못하고 network error를 반환합니다.
소스코드는 다음과 같습니다

// auth.ts
const postSignup = async ({email, password}: RequestUser): Promise<void> => {
  try{
      const {data} = await axiosInstance.post('/auth/signup', {
      email,
      password,
    });

    return data;
  } catch (error) {
    console.error(error);
  }
};

// axios.ts
import axios from 'axios';

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

export default axiosInstance;

백엔드와 DB연결이 잘못되어있나 싶어서 postman으로 요청을 보내니 그 요청은 잘 전달되어 DB에 user가 생성됩니다.

그리고, 강의 3-8의 소스코드를 그대로 가져와 서버를 켜고 요청을 보내니 여전히 network error가 발생합니다.

어디서 실수를 해서 에러가 나는 것일까요?

react-native typescript nestjs react-query zustand

답변 2

Kyo

지식공유자

회원가입이 안된다면 회원가입을 하는데 필요한 코드들을 봐야하는데

api함수 하나만 보여주시면 저도 어디서 실수를 했는지는 저도 알수가 없는데요.

안드로이드로 진행하고 계신다면 3-8 강의에서 수업노트를 참고해보시겠어요?

3-8수업에서 모바일이라면 [수업자료]를 누르고, pc라면 수업노트 보기를 누르거나 아래로 스크롤하면 됩니다.

Coco

질문자

아 강의노트를 제대로 확인 못했네요 죄송합니다 ㅠㅠㅠㅠ
일단은 localhost를 로컬 ip주소로 변경하니 코드가 제대로 동작했습니다.

앞으로는 확실하게 알아보고 질문하겠습니다 ㅠㅠ

Kyo

지식공유자

ios시뮬레이터에서는 localhost가 동작합니다. 그래서 강의에서는 문제없던것이고, 나중에 안드로이드로도 실행해보면서 강의에서 변경하긴합니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Coco님의 상황을 바탕으로 유사한 문제에 대한 답변을 찾아보았습니다.

회원가입 및 로그인 요청 과정에서 Network Error가 발생하는 경우는 다양한 원인이 있을 수 있습니다. 구체적으로 구현하신 코드와 설명을 바탕으로, 가능한 원인들을 몇 가지 짚어보고자 합니다.

1. CORS 이슈

가장 흔한 원인 중 하나는 CORS(Cross-Origin Resource Sharing)입니다. 프론트엔드와 백엔드가 다른 도메인(또는 포트)에서 실행될 때 발생할 수 있습니다. NestJS 백엔드에서 CORS를 허용하는 설정을 추가했는지 확인해보세요.
CORS 관련 질문 해결 방법에서 로그인 및 로그아웃 관련 CORS 이슈를 어떻게 해결했는지 참고하실 수 있습니다.

2. 서버 주소 확인

사용하고 계신 baseURL이 http://localhost:3030으로 되어 있는데, 정확히 서버가 이 주소에서 실행 중인지 확인해주시기 바랍니다. 또한, 모바일 디바이스를 통해 요청을 보낼 경우 localhost 대신 내부 IP 주소를 사용해야 할 수 있습니다.

3. 에러 로그 분석

에러 로그를 자세히 분석해 보세요. catch 블럭에서 받은 error 객체를 출력해보면 에러의 상세한 내용을 파악할 수 있습니다. 특히, error.response를 통해 서버로부터의 응답을 확인할 수 있습니다.

4. 백엔드 서버 로그 확인

백엔드 서버 로그를 확인하여 요청이 실제로 도달하지 않는다면 네트워크 문제, 요청 URL 경로 오류 등을 의심해볼 수 있습니다.

5. 포스트맨 사용시 정상 동작 확인

포스트맨을 사용하여 요청이 성공하는 경우와 코드를 통해 요청했을 때의 차이점을 분석해보세요. 헤더 설정에 차이가 있는지, 요청 바디의 형식이 정확한지 확인해보세요.

해결에 도움이 될 수 있는 추가 정보나 질문 강의 내용과 관련된 직접적인 해결 방법을 제시하는 정보가 없어, 위의 일반적인 조언들을 참고하여 문제를 해결하시길 바랍니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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