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

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

해결된 질문

24.09.09 22:59 작성

121

수정됨

안녕하세요. 지금 강의 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

지식공유자

2024. 09. 09. 23:11

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

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

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

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

Coco

질문자

2024. 09. 09. 23:13

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

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

Kyo

지식공유자

2024. 09. 09. 23:14

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

인프런 AI 인턴

2024. 09. 09. 23:01

안녕하세요, 인프런 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. 포스트맨 사용시 정상 동작 확인

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

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

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

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

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