드디어 CORS랑 만나다

CORS.. 정말 많이 들어본 단어지만 무슨 내용인지 자세히는 몰랐다. HTTP 헤더에 대해 공부하던 중 본문에 나왔길래 드디어 공부한다 😂

CORS란 Cross-Origin Resource Sharing, 교차 출처 리소스 공유의 줄임말이다. 이는 추가 HTTP헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(protocol, domain, port)와 다를 때 교차 출처 HTTP 요청을 실행한다.

🙄 출처가 뭔데?
: 웹 콘텐츠의 출처(Origin)란 접근할 때 사용하는 URL의 scheme(protocol), host(domain), port로 정의된다. 두 객체의 scheme, host, port가 모두 일치하는 경우 같은 출처를 가졌다고 말한다.

🤔 잠시 '출처'에 대해 알아볼까요?

일부 작업은 동일 출처 콘텐츠로 제한되나, CORS를 통해 제한을 해제할 수 있다.

동일 출처의 예제

1. scheme(http)와 host(example.com)가 일치한 경우

http://example.com/app1/index.html
http://example.com/app2/index.html

2. HTTP의 기본 포트는 80이므로 동일한 출처이다.

http://Example.com:80
http://example.com

다른 출처의 예제

1. 다른 scheme(http)인 경우

http://example.com/app1
https://example.com/app2

2. 다른 host(domain)인 경우

http://example.com
http://www.example.com
http://myapp.example.com

3. 다른 port인 경우

http://example.com
http://example.com:8080

교차 출처 요청의 예시를 살펴보자.

https://domain-a.com의 프론트엔드 JavaScript 코드가 XMLHTTPRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우에 대해 알아보자.