Content-Type

• HTTP protocol에서 Message Body에 들어가는 타입을 HTTP Header에 명시할 수 있다.
• 이 때 바디의 타입을 명시하는 필드가 Content-Type이다.
• 종류

1. Text 타입
   1. text/css, text/javascript, text/html, text/plain
2. File 타입
   1. multipart/form-data
3. Application 타입
   1. application/json, application/x-www-urlencoded

application/json 과 application/x-www-form-urlencoded

• application/json은 RestFul API를 사용하게 되며 request를 날릴 때 대부분 json을 많이 사용하여 사용이 늘게 되었다.
  • {key: value} 형태

let data = {
    id: id,
    pw: pw
}
axios.post(url,  JSON.stringify(data), { // json을 json타입의 text로 변환
  headers: {
    "Content-Type": `application/json`, // application/json 타입 선언
  },
})
.then((res) => {
  console.log(res);
});

• application/x-www-form-urlencoded는 html의 form의 기본 Content-Type이다.
  • key=value&key=value

import qs from 'qs';
const data = { 'bar': 123 };
axios.post(
  '/foo', 
  qs.stringify(data), // json을 queryString 타입의 text로 변환
  headers: {
    "Content-Type": `application/x-www-form-urlencoded`, // x-www-form-urlencoded 타입 선언
  },
})
.then((res) => {
  console.log(res);
});

multipart/form-data

• 파입 업로드를 구현할 때, 클라이언트가 web 브라우저라면 폼을 통해서 파일 전송한다.
• 웹 브라우저가 보내는 HTTP 메시지를 Content-Type 속성이 multipart/form-data로 지정되고 정해진 형식에 따라 메시지를 인코딩하여 전송한다.
• multipart는 MIME(Multipurpose Internet Mail Extensions) 타입 중의 하나이다.
• 서버는 멀티파티 메시지에 대해서 각 파트별로 분리하여 개별 파일의 정보를 얻게 된다.
• 이미자 파일도 문자로 이루어져 있기 때문에, 이미자 파일을 문자로 생성하여 HTTP request body에 담아 서버로 전송한다.

multipart가 생긴 배경

• HTTP Request의 body에 클라이언트가 전송하려는 데이터가 담김
• Body에 들어가는 데이터의 타입을 HTTP Header에 명시해 줌으로써 서버가 타입에 따라 알맞게 처리
• 해당 Body의 타입을 명시하는 Header가 Content-Type
• 이때 중요한 점은 HTTP Request의 body가 한 종류의 타입이 대부분이라는 것이다.
• Content-Type도 한 종류만 명시할 수 있다.
• 하지만 파일 업로드의 상황을 살펴보면 사진을 업로드하는 경우 사진에 대한 설명을 위한 input과 사진 파일을 위한 input 2가지가 들어간다.
• 설명은 application/x-www-form-urlencoded, 사진은 image/png이다.
• 이때 두 종류의 데이터를 구분해서 넣어주는 방법이 필요해 등장한 것이 multipart이다.

var photoFile = document.getElementById("photo");
const formData = new FormData();
formData.append("photo", photoFile.files[0]); // 파일 첨부
formData.append("comment", commentValue); // 텍스트 첨부
axios.post('<https://domain/form-post-url>', formData, { // 요청
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})