CORS가 어려운 이유 - 2. HTTP 요청과 응답의 구조

CORS 에러는 웹 개발에 입문하는 많은 사람들에게 좌절을 안겨주는 유명한 오류입니다. CORS 에러는 웹을 이루는 다양한 요소를 먼저 이해하고 나면, 어렵지 않게 이해할 수 있습니다. 하지만 그 요소가 무척이나 많은데요. 필요한 개념들을 다양한 실습과 함께 모두 뜯어보고 이해해봅시다. [CORS 가 어려운 이유]는 시리즈로 구성됩니다. 아래 목차를 확인해주세요.

 

CORS 가 어려운 이유

1. CORS 에러 마주하기 (현재 글)
2. HTTP 요청과 응답의 구조

---

 

✅ HTTP 요청메시지의 구조 또는 응답메시지의 구조를 알고싶다면 한 번 읽어보세요.

✅ 실제 HTTP 요청을 보내보고, 요청메시지의 모습과 응답메시지의 모습을 직접 눈으로 확인해봅니다.

 

웹브라우저(client)는 서버에 요청(request)하고, 요청을 받은 서버는 요청한 웹브라우저에 응답(request) 합니다. CORS 의 정의는 다음과 같습니다.

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 HTTP 헤더 기반 메커니즘입니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

지금 이 문장 전체를 이해하지 못해도 괜찮습니다. 다만 CORS 는 'HTTP 헤더 기반 메커니즘'이라고 합니다. CORS 의 개념이 어렵다면 HTTP 의 통신방식, 더 나아가 헤더의 동작 원리를 이해하지 못한 것이 이유일 수 있습니다.

HTTP 요청 메시지와 HTTP 응답 메시지

curl 스크립트를 활용하여 `curl -v -o test.html https://www.youtube.com/new` 실행해보면 다음과 같이 요청 메시지의 모습을 확인할 수 있습니다.

 

HTTP 요청메시지

> GET /new HTTP/1.1
> Host: www.yotube.com
> User-Agent: curl/8.9.1
> Accept: */*
>

(`>` 는 client 에서 server 로 보내는 방향을 의미합니다. 실제 전송되는 부분은 아닙니다. )

 

HTTP 요청메시지는 요청줄(request line), 요청헤더, 요청본문으로 구성됩니다.

 

첫번째 줄(GET /new HTTP/1.1)은 요청줄(request line) 입니다.

• GET
  :메소드(method); POST, PUT, OPTIONS 등이 올 수 있음
• /new
  : 경로(path)
• HTTP/1.1
  : 프로토콜(protocol) 버전

두번째 줄부터 다음 CRLF(줄바꿈)이 연속해서 두 번 나올 때까지는 헤더가 기술됩니다. 이 경우에는 3가지의 헤더( Host, User-Agent, Accept)가 포함되었습니다.

• Host: www.youtube.com
  : Host 입니다. 브라우저가 요청한 대상 서버를 가리킵니다. 아래에서 살펴볼 Origin 의 구성 요소입니다.

💡 메시지의 맨 아래 한 줄을 띄우고 요청본문(body)이 필요한 경우 포합됩니다. 이 섹션에서는 다루지 않았습니다.

 

반응형

 

HTTP 응답메시지

< HTTP/1.1 200 OK
< accept-ch: Sec-CH-UA, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA-Mobile
< cache-control: max-age=0, private, must-revalidate
< connection: close
< content-length: 479
< content-type: text/html; charset=utf-8
< date: Sat, 09 Nov 2024 05:12:33 GMT
< server: Cowboy
< set-cookie: sid=3a637417-9e59-11ef-a261-2cb548dfdeda; path=/; domain=.yotube.com; expires=Thu, 27 Nov 2092 08:26:41 GMT; max-age=2147483647; secure; HttpOnly
<
(...생략...)

(`<` 는 server 로부터 client 로의 방향을 의미합니다. 실제 전송되는 부분은 아닙니다.)

 

HTTP 응답메시지는 상태줄(status line), 응답헤더, 응답본문 으로 구성됩니다.

 

첫번째 줄(HTTP/1.1 200 OK)은 상태줄(status line)입니다.

• HTTP/1.1
  : 프로토콜 버전
• 200
  : 상태코드(status code)
• OK
  : 상태메시지(status message); 상태코드에 대응

두번째 줄 부터 CRLF(줄바꿈)이 두 번 나올 때까지 응답헤더가 기술됩니다.

💡 메시지의 맨 아래 한 줄을 띄우고 요청본문(body)이 필요한 경우 포합됩니다. 이 섹션에서는 다루지 않았습니다.

💡 curl -i 옵션으로 '응답헤더'만 확인할 수도 있습니다.