공통 헤더 | |
|---|---|
Date | HTTP 메시지가 만들어진 시각입니다. 자동으로 만들어집니다. Date: Thu, 12 Jul 2018 03:12:27 GMT |
Connection | HTTP/2를 사용하지 않는다면 보통 HTTP/1.1을 사용하게 되는데요. Connection은 기본적으로 keep-alive로 되어있는데 사실상 아무런 의미도 없습니다. HTTP/2에서는 아예 사라져버렸습니다. Connection: keep-alive |
Cache-Control | 일반 헤더 필드는 요청과 응답 내의 캐싱 메커니즘을 위한 디렉티브를 정하기 위해 사용됩니다. 캐싱 디렉티브는 단방향성이며, 이는 요청 내에 주어진 디렉티브가 응답 내에 주어진 디렉티브와 동일하다는 것을 뜻하지는 않는다는 것을 의미합니다. Cache-control: no-cache |
Content-Length | 요청과 응답 메시지의 본문 크기를 바이트 단위로 표시해줍니다. 메시지 크기에 따라 자동으로 만들어집니다. Content-Length: 52 |
Content-Language | 사용자의 언어를 뜻합니다. 요청이나 응답이 무슨 언어인지와는 관련 없습니다. 예를 들어 한국 사람한테 일본어를 가르치는 사이트일 경우, 페이지 언어는 일본어더라도 Content-Language는 ko-KR일 수 있습니다. Content-Language: de-DE, en-CA |
Content-Type | 컨텐츠의 타입(MIME)과 문자열 인코딩(utf-8 등등)을 명시할 수 있습니다. 조금 뒤에 나오는 Accept 헤더, Accept-Charset 헤더와 대응됩니다. 아래 예시로 든 헤더는 현재 메시지 내용이 text/html 타입이고 문자열은 utf-8 문자열임을 알려줍니다. 프런트엔드에서 서버로 데이터를 보낼 때는 text/html 이런 것 대신 www-url-form-encoded나 multipart/form-data같은 게 Content-Type이 됩니다. Content-Type: text/html; charset=utf-8 |
Content-Encoding | Content-Encoding은 컨텐츠 압축된 방식입니다. 응답 컨텐츠를 br, gzip, deflate 등의 알고리즘으로 압축해서 보내면, 브라우저가 알아서 해제해서 사용합니다. 이 외에도 다양한 압축 알고리즘이 존재합니다. 컨텐츠 용량이 줄어들기 때문에 압축을 권장합니다. 요청이나 응답 전송 속도도 빨라지고, 데이터 소모량도 줄어들기 때문에 가능하면 압축해두세요. Content-Encoding: gzip, deflate |
요청 헤더 | |
Host | 서버의 도메인 네임이 나타나는 부분입니다(포트 포함). Host 헤더는 반드시 하나가 존재해야 합니다 Host: www.zerocho.com |
User-Agent | Host보다 더 유명한 헤더는 User-Agent입니다. 현재 사용자가 어떤 클라이언트(운영체제와 브라우저 같은 것)를 이용해 요청을 보냈는지 나옵니다. User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 |
Accept | Accept 시리즈를 알아봅시다. Accept 헤더는 요청을 보낼 때 서버에 이런 타입(MIME)의 데이터를 보내줬으면 좋겠다고 명시할 때 사용합니다. Accept: image/png, image/gif Accept-Charset: utf-8 |
Authorization | Authorization 헤더는 인증 토큰(JWT든, Bearer 토큰이든)을 서버로 보낼 때 사용하는 헤더입니다. API 요청같은 것을 할 때 토큰이 없으면 거절당하기 때문에 이 때, Authorization을 사용하면 됩니다. Authorization: Bearer XXXXXXXXXXXXX |
Origin | POST같은 요청을 보낼 때, 요청이 어느 주소에서 시작되었는지를 나타냅니다. 여기서 요청을 보낸 주소와 받는 주소가 다르면 CORS 문제가 발생하기도 합니다. |
Referer | 이 페이지 이전의 페이지 주소가 담겨 있습니다. 이 헤더를 사용하면 어떤 페이지에서 지금 페이지로 들어왔는지 알 수 있기 때문에 애널리틱스같은 데 많이 사용됩니다. Referer은 오타입니다. Referrer가 표준어인데 실수로 Referer로 만들었으며, 하위 호환성 때문에 수정하지 못하고 있습니다. Referer: https://www.zerocho.com/category/JavaScript |
응답 헤더 | |
Access-Control-Allow-Origin | 프론트엔드 개발자들에게 악명 높은 헤더입니다. 요청을 보내는 프론트 주소와 받는 백엔드 주소가 다르면 CORS 에러가 발생하는데요. 이 때 서버에서 응답 메시지 Access-Control-Allow-Origin 헤더에 프론트 주소를 적어주어야 에러가 나지 않습니다. Access-Control-Allow-Origin: www.zerocho.com CORS 요청 시에는 미리 OPTIONS 주소로 서버가 CORS를 허용하는지 물어봅니다. 이 때 Access-Control-Request-Method로 실제로 보내고자 하는 메서드를 알리고, Access-Control-Request-Headers로 실제로 보내고자 하는 헤더들을 알립니다. Allow 친구들은 Request에 대응되는 애들로, 서버가 허용하는 메서드와 헤더를 응답하는데 사용됩니다. Request랑 Allow가 일치하면 CORS 요청이 이루어지는 것이죠. |
Allow | Allow 헤더는 Access-Control-Allow-Methods랑 비슷하지만, CORS 요청 외에도 적용된다는 데에 차이가 있습니다. 즉 GET www.zerocho.com은 되고, POST www.zerocho.com은 허용하지 않는 경우, 405 Method Not Allowed 에러를 응답합니다. Allow: GET |
Content-Disposition | 응답 본문을 브라우저가 어떻게 표시해야 할지 알려주는 헤더입니다. inline인 경우 웹페이지 화면에 표시되고, attachment인 경우 다운로드됩니다. Content-Disposition: inline |
Location | 300번대 응답이나 201 Created 응답일 때 어느 페이지로 이동할지를 알려주는 헤더입니다. '/'는 '/'주소로 리다이렉트 합니다. HTTP/1.1 302 Found |
Content-Security-Policy | 다른 외부 파일들을 불러오는 경우, 차단할 소스와 불러올 소스를 여기에 명시할 수 있습니다. 하나의 웹 페이지는 다양한 외부 소스들을 불러옵니다. 이미지도 불러오고 script 태그로 자바스크립트 파일들도 불러옵니다. 폰트나 스타일, 아이프레임도 불러오고요. 하지만 해커들에 의해 원하지 않는 파일을 불러오게 될 수도 있습니다. 악성 코드가 담겨져있는 파일이라면 큰 일이 나겠죠. XSS 공격 같은 것이 하나의 예시입니다. 이럴 때 Content-Security-Policy로 허용할 외부 소스만 지정할 수 있습니다. Content-Security-Policy: default-src 'self' |
Overview
Content Tools