자주 볼 수 있는 헤더가 있다.
대표적인 크로스 도메인 이슈(CORS) 회피하기 위한 헤더
[Access-Control-Allow-Origin: * , Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS]
위와 같이 헤더를 사용하고 있었지만 이해하지않고 사용했었다.
최근에 소셜라이트로 토큰을 발급받고 토큰을 헤더로 전송하고 받는다는 걸 활용하려고 했는데
잘 되지않기도 해서 HTTP 헤더에 대해서 공부하게 됐다.
우선 자주 찾아보는 웹사이트 MDN 웹 문서를 참고했다.
"HTTP 헤더는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해줍니다. HTTP 헤더는 대소문자를 구분하지 않는 이름과 콜론 ':' 다음에 오는 값(줄 바꿈 없이)으로 이루어져 있습니다. 값 앞에 붙은 빈 문자열은 무시됩니다."
링크로 들어가면 핵심 내용이 바로 첫 줄에 있다.
HTTP헤더는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송을 할 수 있게 한다.
그렇기에 요청 그리고 요청에 대한 응답을 위한 부가정보라고 보면 되겠다.
어쩌면 당연한 말이지만 웹사이트가 보이는 부분과 처리하는 부분이 나눠져 있기 때문이다.
헤더를 세부적으로 나누면 4가지로 구성되어있다.
General header: 요청과 응답 모두에 적용되지만 바디에서 최종적으로 전송되는 데이터와는 관련이 없는 헤더.
Request header: 페치 될 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더.
Response header: 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더.
Entity header: 콘텐츠 길이나 MIME 타입과 같이 엔티티 바디에 대한 자세한 정보를 포함하는 헤더.
네이버 페이지 창에서 F12를 눌러 개발자 창을 열고 Network카테고리에서 naver.com을 클릭해보자
요청 헤더와 응답 헤더들을 볼 수 있다
다시 돌아가서 요청 헤더는 클라이언트 자체에 대한 자세한 정보를 포함한다.
GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0GET 요청하겠으며 호스트 이름은 developer.milla.org이라는 정보를 제공한다.
Accept은 MIME 타입으로 표현되는, 클라이언트가 이해 가능한 콘텐츠 타입이 무엇인지를 알려준다.
예를 들어 텍스트, 이미지, html를 표기해 타입을 알려주는 역할을 한다.
응답 헤더는 HTTP 응답에서 사용될 수 있는 HTTP 헤더이다.
200 OK
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY위에서 CORS회피에 대해서 말했듯이 원래 호스트가 다르게 되면 아무 요청에 대해서 허가해주고 응답해주면 안 되기 때문에요청에 대해 허가가 없이는 정보를 전달해주지 않는다 ex) AJAX통신
그렇기 때문에 응답 헤더로 Access-Control-Allow-Origin을 통해 허용하고, Access-Control-Allow-Methods로 어떤 요청 GET인지 POST인지 요청을 서버에서 작성을 한 후에 정보를 응답으로 보내줄 수 있다.
헤더에는 인증, 캐싱, 쿠키, 보안 등등 다양한 종류가 있는데 구성하는 페이지에 대한 부가정보라고 생각하면 되겠다.
시간이 되면 각자에게 필요한 헤더를 공부해보길 바란다.
헤더에 대한 자세한 정보들은 MDN -웹문서에 자세히 나와있다.