[React/axios] Post 메서드 사용 시 500에러 발생 해결 방법

Axios Post메서드

프로젝트를 진행하다보니 원인을 모를 500에러가 많이 발생했었는데, 처음에는 서버에서 발생하는 오류라고 생각하고 백엔드 쪽에서 많이 수정을 시도하고, 여러 가지 테스트를 진행하면서 해결하려고 시도했다.

단순하게 리액트에서 시도할 경우 500에러가 계속 발생했고, 포스트맨을 활용해서 진행한 결과 정상적으로 원하는 형태로 동작하는 모습을 확인했다.

이 과정에서 에러를 해결하기 위해서 Axios의 Post 메서드에 대해 많이 찾아보았고, 발견한 원인에 대해서 적어보자 한다.

 

기본적으로 axios로 백엔드랑 통신할 경우 아래와 같은 형태로 axios를 사용하는 경우가 대부분이다.

 

const config = {
  method: 'post', // HTTP 메서드
  url: 'https://example.com/api', // 요청을 보낼 URL
  data: data,// 보낼 데이터
  headers: {
    'Content-Type': 'application/json', 
    ... // 토큰이나 기타 헤더 
  },
};

나는 Post 메서드를 사용하면서 500에러를 발생한 부분이 좋아요, 찜 등의 기능에서 발생했다.

좋아요와 찜 기능 구현시에 따로 Post로 토큰만 보내주면 바로 상태를 반환하도록 구성을 했는데, 포스트맨으로는 잘 되는데, 직접 프론트에서 할 때만 500에러가 발생했는데, 원인이 다음과 같았다.

Post 요청 시 method, url, data가 무조건 포함 되어야 한다.

즉, 프론트에서 보낼 데이터가 없더라도 위의 3가지가 무조건 포함되어야한다.

내가 작성한 코드는 아래와 같은 형태로 작성했었다.

const config = {
  method: 'post', 
  url: 'https://example.com/api', 
  headers: {
    'Content-Type': 'application/json', 
	...
  },
};

데이터를 빼고 보냈고, 이 경우에는 axios가 headers를 인증시 필요한 토큰이 아닌, data로 인식을 해서 500에러가 발생한것이었다.

이를 해결하기 위해서는 아래처럼 데이터를 빈 객체로 보내줘야 정상 동작한다.

반응형

const config = {
  method: 'post', // HTTP 메서드
  url: 'https://example.com/api', // 요청을 보낼 URL
  data: {} // 빈 객체
  headers: {
    'Content-Type': 'application/json', 
    ... // 토큰이나 기타 헤더 
  },
};

이를 몰라서 백엔드가 원인인 줄 알고 한참을 코드를 수정하는 등 많은 시간을 소비했던 기억이 남아 이렇게 정리한다.