[axios] Header, Content-Type, MIME, Authorization,

 

 

 

HTTP Message

 

HTTP Header : HTTP 전송 시 서버와 클라이언트에게 필요한 모든 부가 정도 

 헤더 필드 명 : 필드 값 구조. 여러개의 필드 값이 존재 간으하다.

과거 RFC2516 분류 : General Header, Request Header, Resaponse Header, Entity Header

 

Empty Line : 헤더와 메시지 바디 구분

 

HTTP Body : 전송되어야 하는 데이터 자체. 항상 존재하는 건 아니다.

 

General Header

 

리퀘스트 메시지와 리스폰스 메시지에 적용되는 기본적인 정보

 

Data: 메시지가 생성된 날짜

 

Transfer-Encoding : 분할 전송, 메시지 바디의 전송 코딩 형식을 지정한다.

 

Request Header

 

요청 정보. 리퀘스트 메시지에 사용되는 헤더로 Request Line, Request Header, General Header, Entity Header로 이루어져 있다.

 

- Accept : 콘텐츠가 선호하는 미디어 타입

 

- Accept-Chareset : 클라이언트가 선호하는 문자 인코딩

 

- Accept-Encoding : 클라이언트가 선호하는 문자 인코딩

 

- Accept-Charset: 클라이언트가 선호하는 문자 인코딩

 

- Accept-Encoding: 클라이언트가 선호하는 압축 인코딩 방식

 

- Accept-Language: 자연 언어 우선 순위

 

- Host: 요청한 호스트 정보(도메인). 하나의 IP 주소에 여러 도메인이 적용되어 있는 경우를 구분하며 필수 헤더다.

 

- User-Agent: 클라이언트 애플리케이션의 명칭 및 버전 정보. 어떤 종류의 브라우저에서 장애가 발생하는지 파악이 가능하며 통계에 많이 사용된다.

 

- Referer: 직전 웹페이지 주소. 유입 경로 분석이 가능하며 referrer의 오타다.

 

 

Response Header

 

응답 정보. 특정 유형의 리스폰스 메시지에 사용되는 헤더로 Status Line, Response Header, General Header, Entity Header로 이루어져 있다.

 

Server: 요청을 처리하는 origin 서버의 소프트웨어 정보
Location: 페이지 리다이렉션. 3xx 응답의 결과에 Location 헤더가 있다면 Location 위치로 리다이렉트한다.
Retry-After: 유저 에어전트가 다음 요청을 하기까지 기다려야 하는 시간(날짜 또는 초단위)

 

 

Entity Header (Representation)

 

표현. 리퀘스트 메시지와 리스폰스 메시지에 사용되는 표현 데이터를 해석하는데 사용한다.

 

- Content - Type : 표현 데이터의 미디어 타입 형식 (text/html;charset=utf-8, application/json, image/png)

 

- Content-Encoding: 표현 데이터의 압축 방식. 데이터 보낼 때 메시지 바디를 압축 후 인코딩 헤더를 추가하고, 읽는 쪽에서 해당 정보로 압축을 해제한다. (gzip, deflate, identity)

 

- Content-Language: 표현 데이터의 자연 언어 (ko, en, en-US)

 

- Content-Length: 표현 데이터의 길이. 한번에 요청하고 한번에 받는다. Transfer-Encoding 때는 사용하지 못한다.

 

Contet-Type ?

 

 

위의 그림에서 Message Body 에 들어가는 타입을 http header에 명시해 줄 수 있는데 이때 명시해 줄 수 있도록 해주는 필드가 바로 Content Type이다.

 

HTTP 통신에서 전송되는 데이터 타입을 나타내는 header정보 중 하나

 

Content-Type 에 따라 데이터를 받는 측에서 데이터를 어떻게 처리해야 할 지 판단한다.

 

여기서 "데이터를 받는 측"은 Request(대표적으로 브라우저) 또는 Response(대표적으로 웹서버) 둘다 포함 된다.

 

그중에 Text타입으로는 text/css, text/javascript, text/html, text/plain 등이 있다. 

또 file을 실어보내기 위해서는 multipart/form-data가 있고 Application 타입으로는 application/json, application/x-www-urlencoded가 있다.

 

HTTP GET, POST 메소드에서 Content-Type

 

HTTP 메소드에서 GET 방식은 value=text 형식으로 보내지기 때문에 Content-Type 은 필요 없다.

 

 HTTP 메소드에 POST, PUT처럼 Body에 data를 보낼 때 Content-Type이 필요하다.

 

 

MIME

 

Content-Type의 종류를 알기 전, MIME에 대한 지식이 필요하다!

 

MIME란, Multipurpose Internet Mail Extensions의 약지

 

전자 우편을 위한 인터넷 표준 포맷이다. 전자우편은 7비트 ASCII 문자를 사용하여 전송되기 때문에, 8비트 이상의 코드를 사용하는 문자나 이진 파일들은 MIME 포맷으로 변환되어 SMTP로 전송된다. 실질적으로 SMTP로 전송되는 대부분의 전자 우편은 MIME 형식이다. MIME 표준에 정의된 content types은 HTTP와 같은 통신 프로토콜에서 사용되며, 점차 그 중요성이 커지고 있다.
- 위키백과 -

 

중요한 점은 http통신에서 Content-Type은 mime표준에 정의된 것을 사용한다는 점이다.

 

해당 MIME의 종류는 너무 많으니,

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

MIME 타입의 전체 목록 - HTTP | MDN

 

위에서 확인!

 

 

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

 

요즘의 대부분의 request 에 대한 Content-Type은 application/json타입이다.

 

application/json은 RestFul API를 사용하게 되며 request를 날릴 때 대부분 json을 많이 사용하게 됨에 따라 자연스럽게 사용이 많이 늘게 되었다.

 

application/x-www-form-urlencoded는 html의 form의 기본 Content-Type으로 요즘은 자주 사용하지 않지만 여전히 사용하는 경우가 종종 존재한다.

 

차이점은 application/json은 {key: value}의 형태로 전송되지만 application/x-www-form-urlencoded는 key=value&key=value의 형태로 전달된다는 점이다.

 

즉 application/x-www-form-urlencoded는 보내는 데이터를 URL인코딩 이라고 부르는 방식으로 인코딩 후에 웹서버로 보내는 방식을 의미한다. (따라서 사용하는 library나 framework에서 x-www-form-urlencoded를 사용할 경우 body 인코딩이 지원하는지 꼭 확인해봐야 한다.)

 

 

예제 코드 (application/json)

 

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)

 

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);
});

 

mutipart/form-data

 

파일 업로드를 구현할 때 클라이언트가 web 브라우저라면 폼을 통해서 파일을 전송한다.

웹 브라우저가 보내는 HTTP 메시지는 Content-Type 속성이 multipart/form-data로 지정되고 정해진 형식에 따라 메시지를 인코딩하여 전송한다. 

참고로 multipart는 MIME(Multipurpose Internet Mail Extensions) 타입 중의 하나이다.

본론으로 돌아와서 multipart/form-data를 처리하기 위한 서버는 멀티파트 메시지에 대해서 각 파트별로 분리하여 개별 파일의 정보를 얻게 된다.

여기서 중요한 점은 이미지 파일을 전송한다고 해서 png나 jpg 파일을 전송하는 것이 아니라는 것이다.

이미지 파일도 문자로 이루어져 있기 때문에 이미지 파일을 문자로 생성하여 HTTP request body에 담아 서버로 전송하는 것이다.

 

 

 

 

Authorization

 

인증 토큰(jwt) 를 서버로 보낼 때 사용하는 헤더

 

보통 Basic 이나 Bearer같은 토큰의 종류를 먼저 알리고 그 다음에 실제 토큰 문자를 적어 보낸다.

 

Authorization: Bearer XXXXXXXXXXXXX

 

HTTP Authorization 요청 헤더는 서버에서 사용자 에이전트를 인증하는 자격증명을 제공하여 보호된 리소스에 대한 액세스를 허용하는 데 사용될 수 있다.

 

 

headers Authorization

 

무분별한 데이터 접근을 막기 위해 headers에 토큰을 추가하여 token값이 있어야만 데이터에 접근 가능하게 만들기

 

headers: {
	Authorization: `Token ${token}`
}

 

header 넣기

 

1. post, put

 

axios.post('api',
		{
        	name: name
        },
        {
        	headers: {Authorization: token,},
        }
      )

 

2. get

 

axios.get('api',
		{
        	params: {name: name},
        	headers: {Authorization: token,},
        }
      )

 

3. delete

 

axios.delete('api',
		{
        	headers: {Authorization: token,},
  			data: {name: name},
        }
      )