5. HTTP

📌 HTTP
HTTP는 HyperText Transfer Protocol의 줄임말로, HTML과 같은 문서를 전송하기 위한 Application Layer 프로토콜이다.
HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP messages 양식에 맞춰 요청을 보내면 서버도 HTTP messages 양식에 맞춰 응답한다.
✔️ Stateless
HTTP는 특정 상태를 유지하지 않는 특징이 있다. (무상태성)
Stateless는 말 그대로 상태를 가지지 않는다는 뜻이다. HTTP로 클라이언트와 서버가 통신을 주고받는 과정에서, HTTP가 클라이언트나 서버의 상태를 확인하지 않는다. 사용자는 쇼핑몰에 로그인하거나 상품을 클릭해서 상세 화면으로 이동하고, 상품을 카트에 담거나 로그아웃을 할 수도 있다. 클라이언트에서 발생한 이런 모든 상태를 HTTP 통신이 추적하지 않는다. HTTP는 통신 규약일 뿐이므로 상태를 저장하지 않는다.
서버의 상태를 확인하지 않기 때문에 해당 서버에 장애가 생겨서 서버가 바뀌어도 HTTP는 그저 다시 요청만 할 뿐이다. 때문에 상태 유지보다 많은 요청을 처리할 수 있고 필요 시 서버를 증설(스케일 아웃)하기에도 용이하다. 그렇지만 서버가 고장난다면 요청을 처음부터 다시 진행해야한다는 단점이 있다.
✔️ Connectionless
HTTP는 기본적으로 연결을 유지하지 않으려는 특징이 있다. (비연결성)
HTTP는 클라이언트와 서버가 한 번 연결을 맺은 후, 클라이언트 요청에 대해 서버가 응답을 마쳤다면 맺었던 연결을 끊어버린다. HTTP는 인터넷 상에서 불특정 다수의 통신 환경을 기반으로 설계되었기 때문이다. 만약 서버에서 다수의 클라이언트와 연결을 계속 유지하려 한다면, 이에 따른 많은 리소스와 리소스 지연이 발생하게 될 것이다. 따라서 연결을 유지하기 위한 리소스를 줄이면 더 많은 연결을 할 수 있으므로 HTTP는 비연결적인 특징으로 설계되었다.
비연결성의 장점과 단점은 앞서 무상태성의 내용과 비슷하다.
📌 HTTP Messages
HTTP messages 는 클라이언트와 서버 사이에서 데이터가 교환되는 방식이다. HTTP messages에는 요청(Requests)과 응답(Responses)라는 두 가지 유형이 존재한다.
✔️ Request Messages

❗️ 스타트라인(Start Line)
1. 메서드
수행할 작업(GET, PUT, POST 등)이나 방식을 설명하는 메서드를 나타낸다.
2. URI 혹은 URL
요청 대상 또는 프로토콜, 포트, 도메인의 절대 경로는 요청 컨텍스트에 작성된다. 이 요청 형식은 HTTP 메서드마다 다르다.
- origin 형식
? 와 쿼리 문자열이 붙는 절대 경로이다. POST, GET, HEAD, OPTIONS 등의 메서드와 함께 사용된다.
POST / HTTP 1.1GET /background.png HTTP/1.0HEAD /test.html?query=alibaba HTTP/1.1OPTIONS /anypage.html HTTP/1.0 - absolute 형식
완전한 URL 형식이다. 프록시에 연결하는 경우 대부분 GET 메서드와 함께 사용된다.
GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1 - authority 형식
도메인 이름과 포트 번호로 이루어진 URL의 authority component이다.
HTTP 터널을 구축하는 경우, CONNECT와 함께 사용된다. - asterisk 형식
OPTIONS와 함께 별표 ( ) 하나로 서버 전체를 표현한다.
OPTIONS * HTTP/1.1
3. 프로토콜 버전
HTTP 버전에 따라 프로토콜 버전이 결정된다.
❗️헤더(Hearders)
요청의 Headers는 기본 구조를 따른다. 헤더 이름(대소문자 구분이 없는 문자열), 콜론( : ), 값을 입력한다. 값은 헤더에 따라 다르다.
여러 종류의 헤더가 존재한다.
- General headers
메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더다. - Request headers
→ fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더를 의미한다.
→ User-Agent, Accept-Type, Accept-Language과 같은 헤더는 요청을 보다 구체화한다.
→ Referer처럼 컨텍스트를 제공하거나 If-None과 같이 조건에 따라 제약을 추가할 수 있다. - Representation headers
리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함하는 헤더다.
❗️ 공백 라인(Empty Line)
헤더와 본문을 구분하는 빈 줄이다.
❗️본문(Body)
요청의 본문은 HTTP messages 구조의 마지막에 위치한다. 모든 요청에 body가 필요하지는 않으며, GET, HEAD, DELETE, OPTIONS처럼 서버에 리소스를 요청하는 경우에는 본문이 필요하지 않다. POST나 PUT과 같은 일부 요청은 데이터를 업데이트하기 위해 사용한다.
body는 다음과 같이 두 종류로 나눌 수 있다.
- Single-resource bodies(단일-리소스 본문)
헤더 두 개(Content-Type과 Content-Length)로 정의된 단일 파일로 구성된다. - Multiple-resource bodies(다중-리소스 본문)
여러 파트로 구성된 본문에서는 각 파트마다 다른 정보를 지닌다. 보통 HTML form과 관련이 있다.
✔️ Response Messages

❗️ 스타트라인(Start Line)
응답의 첫 줄은 Status line이라고 부르며, 다음의 정보를 포함한다.
- 현재 프로토콜의 버전(HTTP/1.1)
- 상태 코드 - 요청의 결과를 나타낸다. (200, 302, 404 등)
- 상태 텍스트 - 상태 코드에 대한 설명
❗️헤더(Hearders)
응답에 들어가는 HTTP headers는 요청 헤더와 동일한 구조를 가지고 있다. 대소문자 구분 없는 문자열과 콜론( : ) 값을 입력한다. 값은 헤더에 따라 다르다.
요청의 헤더와 마찬가지로 몇 그룹으로 나눌 수 있다.
- General headers
메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더다. - Response headers
위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더로, Vary, Accept-Ranges와 같이 상태 줄에 넣기에는 공간이 부족했던 추가 정보를 제공한다. - Representation headers
이전에는 Entity headers로 불렀으며, body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함하는 헤더다.
❗️ 공백 라인(Empty Line)
헤더와 본문을 구분하는 빈 줄이다.
❗️본문(Body)
응답의 본문은 HTTP messages 구조의 마지막에 위치한다. 모든 응답에 body가 필요하지는 않다. 201, 204와 같은 상태 코드를 가지는 응답에는 본문이 필요하지 않다.
응답의 body는 다음과 같이 두 종류로 나눌 수 있다.
- Single-resource bodies(단일-리소스 본문)
→ 길이가 알려진 단일-리소스 본문은 두 개의 헤더(Content-Type, Content-Length)로 정의한다.
→ 길이를 모르는 단일 파일로 구성된 단일-리소스 본문은 Transfer-Encoding이 chunked 로 설정되어 있으며, 파일은 chunk로 나뉘어 인코딩되어 있다. - Multiple-resource bodies(다중-리소스 본문)
서로 다른 정보를 담고 있는 body이다.
📌 CORS
CORS는 Cross-Origin Resource Sharing의 약자로, 허가되지 않은 오리진(출처)의 리소스 요청을 제한하는 메커니즘이다.
※ Origin : 리소스에 접근하려 하는 출처(주소)를 말하며 프로토콜, 포트번호를 포함한다
✔️CORS 동작 방식(작성 예정)
브라우저는 요청을 보낼 때 요청 헤더에 오리진 필드를 담아 보낸다. 서버가 이 요청에 응답할 때에는 Access-Control-Allow-Origin 필드의 값에 이 리소스를 접근하는 것이 허용된 출처를 내려준다. 응답을 받은 브라우저는 보냈던 요청과 오리진의 서버가 보내준 Access-Control-Allow-Origin을 비교해본 후 답이 유효한지 아닌지를 결정한다.
여기에는 3가지 시나리오가 존재한다.
- Preflight Request
- Simple Request
- Credentialed Request
✔️ CORS 이슈
CORS 정책에 의해 오리진의 요청이 거부되면서 발생하는 문제이다.
예를 들어 프론트엔드 서버의 포트번호가 3000인데 백엔드 서버의 응답 포트가 8000이라면 포트 번호가 일치하지 않기 때문에 요청이 거부된다. CORS 정책에 의해 백엔드 서버의 응답 포트와 프론트엔드 서버의 포트가 상이하기 때문에 오리진이 불분명하다고 판단하여 요청이 거부된 것이다.
이러한 CORS 이슈에 대한 해결 방법으로는 크게 두가지가 존재한다.
- 서버에서 Access-Control-Allow-Origin 헤더에 직접 URI를 세팅하는 방법
CORS 정책 위반으로 인한 문제를 가장 간단하게 해결하는 방법이다.
그러나 사용자의 세션 정보와 캐시를 탈취하는 보안적인 이슈(XSS)가 발생할 수 있고 사용자가 원하지않는 요청(CSRF)이 발생해 권한 도용이 발생할 수 있는 등 보안적인 문제점들이 있다. - 프론트 서버와 백엔드 서버 사이에 별도의 프록시 서버를 두는 방법
프론트에서의 요청이 올 때 해당 오리진을 리소스 접근에 알맞은 오리진으로 우회해서 요청함으로써 원하는 리소스에 접근할 수 있게 하는 방법이다. 대표적인 프록시 서버로는 아파치와 NginX 등이 있다.