[Django] 장고 앱에서 CORS 설정하기

CORS 란 무엇인가

브라우저에서는 보안상의 안전을 위해서 cross-origin HTTP 요청을 제한한다. 따라서 cross-origin 요청을 하기 위해서는 서버 측에서 허용을 해주어야 한다. 이는 HTTP-header 로 구현할 수 있으며, 이를 CORS라고 한다. 

CORS 가 필요한 이유는 다른 사이트에서 원래의 사이트를 흉내내서 악의적으로 사용되는 것을 방지하기 위함이다. 기존 사이트와 동일하게 동작하게 구현하여 사용자의 정보를 악의적으로 가로채는 등의 공격을 하지 못하도록 CORS를 통해 서버와 클라이언트 간 협의가 필요한 것이다. 

CROSS-ORIGIN 이란 

cross-origin 이란 이들 중 한가지라도 다른 경우를 의미한다. 

1. protocol : 프로토콜이 다른 경우이다. ex. http != https

2. domain : 도메인 이름이 다른 경우이다. ex. domain.com != domain2.com

3. port : 예를 들어서 현재 장고 앱이 8000번 포트를 사용한다고 하면, 리액트 앱이 3000번 포트를 사용하므로 같은 ip 라고 하더라도 cross-origin 에 해당하게 된다. 

Django에서 CORS 설정하기

Django 에서는 django-cors-headers package를 설치해주면 된다. 

pip install django-cors-headers

 

settings.py 에 다음과 같이 cors 설정을 추가한다. Django 앱 리소스 접근을 허용할 ip+port 번호를 적어주면된다.

나의 경우 React 앱(프론트엔드)에서의 접근을 허용하기 위해서 포트 번호를 3000으로 지정했다. 

INSTALLED_APPS = [
	...
	'corsheaders'
]

MIDDLEWARE = [
	'corsheaders.middleware.CorsMiddleware',
]

...

CORS_ORIGIN_WHITELIST = ['http://127.0.0.1:3000',
                         'http://localhost:3000']
CORS_ALLOW_CREDENTIALS = True