HTTP

정의

HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜(통신규약)
서버와 클라이언트가 통신을 할 때 서로 교환할 데이터의 형식을 정하는, 합의된 규칙
클라이언트에서 서버에 전송되는 메세지는 요청(Requests)이라고 부르며, 요청에 대한 응답으로서 서버가 클라이언트에 전송하는 메세지를 응답(Response)라고 한다.

HTTP의 특징

HTTP는 연결이 없다. 즉, 브라우저가 HTTP 요청을 시작하고 요청이 이루어진 후 클라이언트는 응답을 기다린다. 서버는 요청을 처리하고 클라이언트가 연결을 끊은 후 응답을 다시 보낸다. 따라서 클라이언트와 서버는 현재 요청을 하거나 응답하는 중에만 서로에 대해 알고 있습니다. 클라이언트 및 서버와 같은 새로운 연결에 대한 추가 요청이 서로 새로운 것입니다.

HTTP는 미디어에 독립적입니다. 즉, 클라이언트와 서버가 데이터 콘텐츠를 처리하는 방법을 알고있는 한 모든 유형의 데이터를 HTTP로 전송할 수 있습니다. 클라이언트와 서버가 적절한 MIME 유형을 사용하여 컨텐츠 유형을 지정해야합니다.

HTTP는 상태 비저장입니다. 위에서 언급했듯이 HTTP는 연결 이 없으며 HTTP가 상태 비 저장 프로토콜 인 직접적인 결과입니다. 서버와 클라이언트는 현재 요청 중에 만 서로를 인식합니다. 그 후 두 사람은 서로를 잊는다. 프로토콜의 이러한 특성으로 인해 클라이언트와 브라우저는 웹 페이지에서 서로 다른 요청간에 정보를 유지할 수 없습니다.

요청 메서드

GET 오직 데이터를 받기만 한다.
POST 클라이언트가 새로운 데이터를 서버에 등록해주길 요청한다.
DELETE 서버에게 데이터 삭제를 요청한다.
PUT 서버에 저장되어있는 데이터 갱신(일부만 수정?업데이트)을 요청한다.
HEAD HEADERS(메타 정보)만을 요청한다.
OPTIONS 목적 리소스의 통신을 설정

상태 코드

200-299 요청을 성공적으로 처리했음
300-399 리다이렉션을 완료(클라이언트의 추가 동작이 필요)
400-499 클라이언트단에서 에러 발생
500-599 서버단에서 에러 발생

메시지

HTTP 요청

1. 시작 줄

1) 서버가 수행해야하는 메소드(GET, POST...)

2) 요청 타겟

• origin 형식: 끝에 '?'와 쿼리 문자열이 붙는 절대 경로
  ⇒HEAD /test.html?query=alibaba HTTP/1.1
• absolute 형식: 완전한 URL
  ⇒ GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
• authority 형식: 도메인 이름 및 옵션 포트CONNECT developer.mozilla.org:80 HTTP/1.1
• asterisk 형식:OPTIONS * HTTP/1.1

3) HTTP 버젼 (ex. HTTP 1.1)

2. 헤더

• General
• Request
• Entity

3. 본문

• 서버에 데이터를 전송하는 경우에만 본문이 있다.
• 본문 형식
  • 단일 리소스 본문: 헤더 두 개(content-type과 content-length로 정의된 단일 파일)
  • 다중 리소스 본문: MIME

HTTP 응답

1. 상태 줄

프로토콜 버전 + 상태 코드 + 상태 메세지
⇒ HTTP/1.1 404 Not Found.

2. 헤더

• 요청 메세지의 헤더와 동일하다.

3. 본문

모든 응답에 본문이 들어가지는 않는다. 201, 204에는 보통 본문이 없다.

• 본문 형식
  • (이미 길이가 알려진 단일 파일로 구성된) 단일 리소스 본문: 헤더 두 개(Content-Type과 Content-Length)로 정의
  • (길이를 모르는 단일 파일로 구성된) 단일 리소스 본문
  • 서로 다른 정보를 담고 있는 멀티파트로 이루어진 다중 리소스 본문

MIME Type

MDN 공식문서

더 공부할 것

HTML 폼 데이터
HTTP 1메세지와 HTTP2 스트림의 차이

Ajax

비동기적인 웹 애플리케이션의 제작에 쓰이는 웹 개발 기법
fetch API 블로깅
사용 예시

fetch('http://52.78.213.9:3000/messages')
.then(function(response) {
  return response.json();
})
.then(function(json) {
  // json 형태로 전달받은 서버로부터의 응답
});

CORS

Same origin:
프로토콜(스킴), 호스트, 포트가 같다는 것을 의미

www.naver.com 과 dict.naver.com 은 다른 도메인
www.naver.com 에서 dict.naver.com의 리소스를 사용하기 위해서는
www.naver.com 서버에 dict.naver.com을 allow해줄 수 있게 설정해야한다.

Access-Control-Allow-Origin: dict.naver.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: Content-Type

Pre-flight Request

OPTIONS 메소드로 요청하려는 외부 도메인에게 요청을 할 수 있는 권한이 있는 지 확인한다.
해당 서버 측에서의 추가 처리 사항이 필요하다.

모든 외부 도메인에서 모든 요청을 허용할 경우

모든 요청의 응답에 아래 header를 추가할 경우

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization

더 공부할 것

쿠키, 세션, 캐시의 차이