CORS란?

 

CORS란?

 

Cross Origin Resource Sharing(교차 출처 자원 공유)의 약자이다. 

한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다. 

 

 

CORS의 탄생 배경

 

기본적으로 웹 브라우저는 동일 출처 정책을 따른다. 동일 출처 정책은 동일한 출처의 리소스에만 접근하도록 제한하는 것이다. 여기서 출처는 프로토콜, 호스트명, 포트가 같다는 것을 의미한다. 이전에는 동일한 도메인에서 리소스를 받아왔지만, 지금은 도메인이 다른 서버에서 제공하는 API를 사용하는 일이 많아졌다. 그래서 이전처럼 동일한 도메인간의 요청만 할 수 없어졌고 CORS가 생겼다.

 

 

CORS의 동작 방식

 

1.Preflight Request(사전요청)

특별한 사전 확인 없이 바로 요청을 보내는 방식. GET, HEAD, POST 메서드를 사용하고 특정 표준 헤더만 포함하는 요청이다.

 

◆  조건

- HTTP 메서드가 GET, HEAD, POST 중 하나여야 한다.
- 요청 헤더가 다음 중 하나여야 한다.
* Accept 
* Accept-Language
* Content-Language 
* Content-Type값이 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나일 경우이다.

 

◆ 작동 방식

① 브라우저가 서버에 요청을 보낸다. 클라이언트가 서버에 리소스를 요청할 때 Origin 헤더를 포함한다.

GET /resource HTTP/1.1
Host: api.example.com
Origin: https://www.example.com

 

② 서버는 요청을 처리한 후, 응답 헤더에 Access-Control-Allow-Origin을 포함하여 해당 출처의 요청을 허용한다.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com
Content-Type: application/json

 

 

2. Simple Request(단순요청)

제 요청 전에 브라우저가 OPTIONS 메서드를 사용하여 서버에 확인을 보내는 방식. GET, HEAD, POST 이외의 메서드를 사용하거나 사용자 정의 헤더를 포함하는 요청이다.

 

◆  조건

- HTTP 메서드가 GET, HEAD, POST 이외의 메서드 (예시: PUT, DELETE)를 사용하는 경우

- 사용자 정의 헤더나 특정 콘텐츠 타입을 사용하는 경우 (예시: X-Custom-Header)

 

◆ 작동 방식

① 클라이언트는 실제 요청을 보내기 전에 OPTIONS 메서드를 사용하여 사전 요청을 보낸다. 이 요청에는 Origin, Access-Control-Request-Method, Access-Control-Request-Headers 헤더가 포함된다.

OPTIONS /resource HTTP/1.1
Host: api.example.com
Origin: https://www.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header

 

② 서버는 사전 요청을 처리한 후, 허용할 메서드와 헤더를 명시하여 응답한다.

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 86400

 

③ 사전 요청이 성공하면, 브라우저는 실제 요청을 서버에 보낸다.

POST /resource HTTP/1.1
Host: api.example.com
Origin: https://www.example.com
X-Custom-Header: value
Content-Type: application/json

 

④ 서버는 실제 요청을 처리하고 응답을 반환한다.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com
Content-Type: application/json