[RESTful API] 원인 모를 400에러 (GET요청, postman에서는 정상 동작)

1. 문제 상황

분명 api명세에 맞게 코드를 작성했고, 400에러가 발생하는데 원인을 모르는 경우가 있다.
심지어 Postman에서는 정상적으로 동작하는 GET 요청이 프론트엔드에서는 400에러를 반환한다. 이는 주로 GET 요청에 body를 포함시켰을 때 발생한다.

2. 원인 분석

1. HTTP 표준과 브라우저 제한

• HTTP/1.1 명세(RFC 7231)에서 GET 요청의 body는 의미론적으로 정의되지 않음
• 대부분의 브라우저는 GET 요청에서 body를 무시하거나 제거함
• Axios는 브라우저 환경에서 XMLHttpRequest를 사용하며, 이는 GET 요청의 body를 지원하지 않음

2. Postman vs 브라우저 차이점

// Postman에서는 동작하는 코드
GET /api/search
Content-Type: application/json

{
  "keyword": "test",
  "page": 1,
  "limit": 10
}

// Axios에서는 실패하는 코드
axios.get('/api/search', {
  data: {  // 이 부분이 무시됨
    keyword: 'test',
    page: 1,
    limit: 10
  }
});

이러한 문제 발생원인은 실행환경 차이에 있다.
브라우저 환경의 경우 XMLHttpRequest나 Fetch API 사용하며 보안 제약이 많고, Postman의 경우 데스크톱 애플리케이션으로 Node.js 기반으로 브라우저 제약을 받지 않는다.
이러한 차이점으로 인해 Postman에서는 GET요청에도 body가 실린채로 전달이 가능한 것이다.

2. 해결 방법

근본적인 해결방법으로는 GET요청에는 body를 실으면 안된다.
GET요청으로 Front에서 Backend로 보낼때에는 params를 사용하거나, body를 사용하기 위해서는 POST요청으로 변경하여야한다.

1. Query Parameters 사용

// 올바른 GET 요청 방식
axios.get('/api/search', {
  params: {
    keyword: 'test',
    page: 1,
    limit: 10
  }
});

// URL: /api/search?keyword=test&page=1&limit=10

2. POST 요청으로 변경

// 복잡한 검색 조건이 필요한 경우
axios.post('/api/search', {
  keyword: 'test',
  filters: {
    category: ['tech', 'science'],
    dateRange: {
      start: '2024-01-01',
      end: '2024-12-31'
    }
  },
  page: 1,
  limit: 10
});