CORS(Cross-Origin Resource Sharing)와 Django

CORS란 무엇인가?

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

모노리틱 아키택처의 프로젝트에서는 이를 몰라도 별 문제가 없을 듯하다. 문제 상황은 MSA에서 개발할 때 발생한다(근본적인 문제는 도메인과 포트가 다르기 때문이다. 요즘 MVVM node 프로젝트는 프론트엔드와 백엔드가 셋트로 제공되기 때문에 문제가 되지 않는 것 처럼 보일 뿐이다. 만약 MSA이더라도 한 도메인, 한 포트에서 요청을 받아 내부적으로 알아서 처리하는 구조라면 django와 함께 사용하여도 전혀 문제가 되지 않는다).
프론트엔드앱에서 API백엔드서버(Django rest framework)에 리소스를 요청하지만, Django는 이를 정책위반이라 판단하여, 프론트엔드에게 데이터를 제공해주지 않게되고, 결국 프론트엔드앱은 웹 브라우저에 아래 그림과 같은 에러(Access to fetch at 'http://localhost:8000/api/gogames' from origin 'http://localhost:3000' has been blocked by CORS policy: No'Access-Control-Allow-Origin'...)를 출력한다.

Django에 CORS 적용

언뜻보기엔 해결하기 난감해보이는 에러이지만, Django settings.py에 몇 줄 추가해줌으로써 이를 해결할 수 있다.

우선은 corsheader 패키지를 설치해주어야 한다.

pip install django-cors-headers

설치가 되었다면, 아래와 같이 settings.py에 등록해주어야 한다.

# settings.py
INSTALLED_APPS = [
    ...
    # 추가
    'corsheaders',
]
MIDDLEWARE = [
    ...
    # 추가
    'corsheaders.middleware.CorsMiddleware',
]
CORS_ORIGIN_WHITELIST = [
    # 허용할 프론트엔드 도메인 추가 EX:
    'http://localhost:3000',
    'https://localhost:3000',
    'http://127.0.0.1:8000',
]