ERR_FAILED 422 (Unprocessable Entity) 에러는 클라이언트가 서버로 전송한 요청이 유효하지 않아 처리할 수 없음을 나타내는 HTTP 상태 코드입니다. 일반적으로 이 에러는 클라이언트가 올바르지 않은 데이터를 서버에 전송하거나, 요청이 서버의 유효성 검사(validation)에 실패한 경우에 발생할 수 있습니다. 여러가지 원인이 있지만, 제가 일으킨 이슈에 대해서 알아보겠습니다.

원인

HTTP API 통신에선 POST 방식일 때 body에 파라미터를 전송해야 하는데
GET 방식처럼 url에 붙여서 보내고 있었습니다.

해결

POST 방식 사용법대로 body에 json 형식으로 파라미터를 보내도록 수정하였습니다.

GET, POST 전송 시 파라미터 위치

• POST 방식: HTTP 요청(request)의 본문(body)에 요청 파라미터 포함.

// fetch 사용 시
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    param1: 'value1',
    param2: 'value2'
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// axios 사용 시
import axios from 'axios';

axios.post('https://api.example.com/data', {
    param1: 'value1',
    param2: 'value2'
  })
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

• GET 방식: URL의 쿼리 스트링에 요청 파라미터 포함하여 전송. 예) url경로?key1=value1&key2=value2

// fetch 사용 시
fetch('https://api.example.com/data?param1=value1&param2=value2')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// axios 사용 시
axios.get('https://api.example.com/data', {
  params: {
    param1: 'value1',
    param2: 'value2'
  }
})
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

두 가지 방식의 차이는 다음 포스팅에서 더 자세히 다뤄보겠습니다.