[HTTP] Axios headers의 Content-Type

api 요청 보낼때 다양한 형식을 사용할 수 있음.

클라이언트 측 설정

groupId, groupName을 POST 방식으로 보내는 예를 들어 설명하겠습니다.

1. "Content-Type": "application/json"

데이터를 data 속성에 직접 할당하여 전송합니다.
json으로 파라미터를 보내므로, 한번에 직렬화 하여 보낼 수 있어 편리합니다.

// 예제 데이터
const group = {
  groupId: 'exampleGroupId',
  groupName: 'exampleGroupName'
};

// 설정 객체
const config = {
  headers: {
    'Content-Type': 'application/json'
  },
  method: 'POST', // 예시
  url: 'http://example.com/api/group', // 요청할 URL
  data: group // JSON 데이터를 바로 전송
};

// 요청 보내기
axios(config)
  .then((response) => {
    console.log('응답 데이터:', response.data);
  })
  .catch((error) => {
    console.error('에러 발생:', error);
  });

2. "Content-Type": "multipart/form-data"

formData 객체를 사용하여 데이터를 구성합니다
파일 업로드를 포함한 데이터를 전송할 때 주로 사용

const formData = new FormData();
formData.append('groupId', 'test01'); // 이렇게 하나씩 추가하는거 너무 불편

/*
➡️ 보낼 데이터가 많으면 forEach 사용
Object.entries(params).forEach(([key, value]) => {
  formData.append(key, value);
});
*/


// 설정 객체
const config = {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  method: 'POST', // 예시
  url: 'http://example.com/api/group',
  data: formData
};

// 요청 보내기
axios(config)
  .then((response) => {
    console.log('응답 데이터:', response.data);
  })
  .catch((error) => {
    console.error('에러 발생:', error);
  });

(formData로 필드 하나씩 지정하여 전송하면 백엔드에서 명확하게 가져올 수 있어 편리하다고 하다. body 방식으로 넘기면 백엔드에서 값이 감싸져있는걸 하나하나 꺼내야 해서 불편하다고.. 예를 들면 아래와 같다.)

String groupId = paramData.get("groupId").toString();
String groupName = paramData.get("groupName").toString();

3. "Content-Type": "application/x-www-form-urlencoded"

이 형식을 사용할 때는 클라이언트 측에서 데이터를 쿼리 문자열로 변환하고, 서버 측에서는 URL-encoded 데이터를 파싱합니다.

const axios = require('axios');
const qs = require('qs'); // 쿼리 문자열을 생성하기 위해 사용

// 예제 데이터
const data = {
  groupId: 'test01',
  groupName: '인사부'
};

// 설정 객체
const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  method: 'POST', // 예시
  url: 'http://example.com/api/group',
  data: qs.stringify(data) // 데이터를 쿼리 문자열로 변환하여 전송
};

// 요청 보내기
axios(config)
  .then((response) => {
    console.log('응답 데이터:', response.data);
  })
  .catch((error) => {
    console.error('에러 발생:', error);
  });