CORS란?

CORS(Cross-Origin Resource Sharing)는 HTTP 헤더에 추가적으로 정보를 보내 한 출저에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브러우저에 알려주는것입니다.

브라우저는 보안상의 이유로 출처가 다른 HTTP요청을 제한합니다. 즉 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올수 있습니다. 다른 출처의 리소스를 불러오려면 올바른 CORS를 헤더에 포함하고있어야합니다.

예를들어 https://foo.example에서 https://bar.other에서 컨텐츠를 호출하려고할때 아래와 같은 코드를 사용할 수 있습니다.

const xhr = new XMLHttpRequest();
const url = 'https://bar.other/resources/public-data/';

xhr.open('GET', url);
xhr.onreadystatechange = someHandler;
xhr.send();

서버와 클라이언트는 간단한 통신을 하고, CORS 헤더를 이용하여 권한을 조정합니다.

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.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
Connection: keep-alive
Origin: https://foo.example

위 요청에서 Origin 부분에서 이 요청이 https://foo.example로부터 오는지 알 수있습니다.

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[…XML Data…]

서버에서온 응답을 확인해볼 경우, 응답안에는 Access-Control-Allow-Origin 헤더가 있으며 이 헤더의 의미는 모든 출처에서 접근이 가능하다는 의미 입니다.

---

참고:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS