CORS란 무엇인가

CORS는 Cross Origin Resource Sharing의 줄임말로 도메인 주소가 다른 서버에 http request를 전송하는 것을 이야기한다. 예를 들어 naver.com에서 api.google.com으로 http request를 보내면 CORS가 되는 것이다.

유의할 점!

• top level domain만 틀려도 CORS라고 간주된다.

예) naver.com이 api.naver.com으로 http request를 보내도 CORS라고 간주한다.

• 심지어 port만 틀려도 CORS이다.

예)localhost:5000이 localhost:8000에 http request를 보내면 CORS로 간주된다.

CORS는 왜 문제인가?

최신 웹 브라우저들이 보안 상의 이유로 JavaScript나 AJAX로 외부 Host로 접속하는 것을 차단하기 시작했다. 그래서 JavaScript는 보안 측면에서 Same Origin Policy 정책을 둬서 자신이 속한 동일 도메인 내에서만 서버 요청을 허용하고 다른 도메인의 서버 요청을 차단한다.

즉 내가 만든 API를 허용하지 않은 다른 유저가 사용하는 것을 막기 위해서 다른 도메인을 가진 접속을 차단하기 시작했는데 허용하고자 하는 유저가 다른 도메인일 경우 접속이 차단되는 문제가 발생한다. 이 문제를 해결하기 위해 CORS 표준이 제안되었으며 요즘은 거의 일반화 되었다.

CORS 표준은 브라우저와 서버에 그들이 권한을 가진 원격 URL을 요청할 수 있는 방법을 제공하는 새로운 HTTP 헤더를 정의해줍니다. 일부 유효성 검사 및 권한 부여는 서버에서 수행할 수 있지만 일반적으로 이러한 헤더를 지원하고 부과하는 제한 사항을 준수하는 것은 브라우저의 책임입니다.

CORS 표준를 준수하여 CORS 요청을 보내는 방법

CORS의 종류는 다음 4가지가 있습니다.

• Simple Request
• Preflight Request
• Credential Request
• Non-Credential Request

이 중 Simple request 와 Preflight request만 알면 된다.

Simple Request

Simple request는 한마디로 simple한 http request를 말합니다. 너무나 심플 함으로 굳이 CORS를 막을 필요가 없는 request입니다. Simple request를 충족하려면 다음 조건을 만족해야 합니다.

GET, HEAD, POST 중 한 가지 방식을 사용해야 함
POST일 경우 Context-type이 아래 셋 중 하나를 만족 해야 함

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain
• Custom Header를 전송하지 않아야 함

Preflight Request

Preflight Request는 먼저 preflight request(사전 요청)을 보내서 서버가 해당 엔드포인트에 CORS 요청을 해도 되는지 허락을 받고 난 후 CORS 요청을 보내는 방법입니다. Preflight 요청은 OPTIONS 메소드를 사용합니다.

1.클라이언트는 엔드포인트에 OPTIONS 요청을 보내는데 Origin 헤더에 클라이언트의 도메인 주소 값을 넣어서 요청을 보내야 합니다.

[Request]
OPTIONS /
Host: service.example.com
Origin: http://www.example.com

2.서버는 OPTIONS 요청을 받으면 Access-Control-Allow-Origin 헤더에 CORS 요청을 보내도 되는 도메인을 명시해줍니다. 추가로 Access-Control-Allow-Methods 헤더에는 CORS 요청이 허용 되는 method들도 명시해 줍니다.

• 참고로 Access-Control-Allow-Origin 헤더의 값을 *로 해주면 누구나 CORS 요청을 보낼 수 있다고 정의가 됩니다. (물론 보안상 좋지 않죠)

[Respose]
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: PUT, DELETE

Django에서는 django-cors-headers 라이브러리를 설치해서 사용하면 된다.