CORS(Cross-Origin Resource Sharing)

* CORS(Cross Origin Resource Sharing)

추가 HTTP 헤더를 사용하여, 한 Origin에서 실행 중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 어플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 http 요청을 실행한다. 예를 들어 https://hithis_a.com  의 프론트엔드 자바스크립트 코드가 XMLHttpRequest를 사용하여 https://hellothis_b.com/data.json  을 요청하는 경우 등이 교차 출처 요청의 예시가 되겠다. 보안 때문에, XMLHttpRequest는 자신의 출처와 동일한 리소스만 부를 수 있어서, 다른 출처(도메인, 프로토콜, 포트)의 리소스를 불러오려면 그 출처에서 CORS 헤더를 포함한 응답을 반환해야 한다.  

 

* HTTP 요청 헤더

cross-origin을 사용하기 위해 클라이언트가 HTTP 요청을 발행할 때 사용한다. 서버를 호출할 때 설정된다.

- Origin: cross-site 접근 요청 또는 preflight request의 출처를 나타낸다. 

Origin: <origin>

origin은 요청이 시작된 서버를 나타내는 URI이이다. 경로 정보는 포함하지 않는다.

 

- Access-Control-Request-Method: 실제 요청에서 어떤 HTTP 메소드를 사용할지 서버에게 알려주는 용도/preflight request할 때에 사용된다. 

Access-Control-Request-Method: <method>

Access-Control-Request-Headers: <field-name>[, <field-name>]*

 

 

* HTTP 응답 헤더

http 응답 헤더는 서버가 접근 제어 요청을 위해 보낸다. 

Access-Control-Allow-Origin: 단일 출처를 지정하여 브라우저의 해당 출처가 리소스에 접근하도록 허용해준다. 자격 요청이 없는 요청의 경우 "*" 와일드 카드는 브라우저의 origin에 상관 없이 모든 리소스에 접근하도록 허용한다. 

Access-Control-Allow-Origin: <origin> | *

 

Access-Control-Allow-Methods: 리소스에 접근할 때 허용되는 메소드를 지정한다. preflight request에 대한 응답으로 사용된다. 

Access-Control-Allow-Methods: <method>[, <method>]*

 

Access-Control-Allow-Headers: preflight request 에 대한 응답으로 Access-Control-Allow-Headers 헤더가 사용된다. 실제 요청시 사용할 수 있는 HTTP 헤더를 나타낸다.

Access-Control-Allow-Headers: <header-name>[, <header-name>]*

 

 

출처 - https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#%EC%9D%B4_%EA%B8%80%EC%9D%80_%EB%88%84%EA%B0%80_%EC%9D%BD%EC%96%B4%EC%95%BC_%ED%95%98%EB%82%98%EC%9A%94