CORS란? (Cross-origin resource sharing)

CORS란?

교차 출처 리소스 공유(이하 CORS)는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. - 위키백과

 

CORS 풀어서 설명하기

위키백과의 설명을 예시와 함께 자세히 풀어보겠습니다. 프론트의 도메인은 example.com:8080, 백엔드의 도메인은 example.com:8000 라고 가정하고 설명을 진행하겠습니다.

1. 프론트엔드에서 백엔드 API로 요청을 진행합니다.
2. 백엔드 서버에서는 다른 도메인임을 감지합니다. (포트번호가 상이하기에 다른 도메인으로 취급함)
3. CORS 허용 여부에 따라 프론트엔드의 요청을 허용하거나 거부합니다.

 

우리는 종종, 개발을 하면서 다음과 같은 메시지를 많이 본 경험이 있습니다.

🚨 Access to fetch at ‘http://example.com:8000’ from origin 
‘http://example.com:8080’ has been blocked by CORS policy: 
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 
If an opaque response serves your needs, set the request’s mode to ‘no-cors’ 
to fetch the resource with CORS disabled.

이 메시지가 바로 CORS 정책을 위반하였다는 이야기 입니다. 즉, 백엔드와 프론트엔드간의 포트번호가 다르기에 다른 도메인으로 취급하여 요청을 거부하였다는 뜻입니다. 따라서, 신뢰가능한 사이트(지금예시에서는 프론트엔드)는 CORS를 허용할 수 있도록 설정을 해주어야 합니다.

 

CORS 허용하기 - Django

Django에서는 django-cors-headers 패키지를 통해 간단한 설정과 함께 CORS를 관리할 수 있습니다. 설정을 통해 신뢰가능한 사이트로, 프론트엔드 도메인을 넣어주면 정상적으로 통신할 수 있게 됩니다.

https://github.com/adamchainz/django-cors-headers

GitHub - adamchainz/django-cors-headers: Django app for handling the server headers required for Cross-Origin Resource Sharing (

 

매우 간단한 개념이지만, 개발을 시작한지 얼마 안되었을때는 무슨 이유로 생기는 오류인지 이해하기 어려웠던 것 같습니다. 해당 포스트를 통해 도움이 되었으면 좋겠습니다. 

 

읽어주셔서 감사합니다 :)