[Django]Django CORS Error

CORS

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

 

CORS Error

대부분 웹 브라우저는 Javascript를 이용한 AJAX(Asynchronous Javascript XML) 통신을 통한 데이터 송수신을 하는데, 다른 도메인을 가진 서버의 URL을 호출해 데이터를 가져오려고 하는 경우 보안 문제인 Cross Domain 에러를 발생시킵니다.

왜냐하면 내가 웹 서비스에서 사용하기 위해 다른 서브 도메인을 가진 API 서버를 구축했는데, 내가 아닌 다른 웹 서비스에서 이 API 서버에 접근해서 마음대로 API를 호출해서 사용하면 안 되기 때문입니다.

동일 출처 정책(Same Origin Policy) 때문에 CORS가 발생하는데, 브라우저에서 외부 서버가 cross-origin HTTP로 요청한 데이터를 보안 목적으로 차단해서 데이터를 받을 수 없습니다. 

즉, 자신과 동일한 도메인에 한해서만 요청을 허용하고 처리해줍니다. 

 

Django CORS Error 해결 방법

1. pip install로 django-cors-headers 앱을 설치합니다. 

django-cors-headers는 Cross-Origin Resource Sharing(CORS) 에 필요한 서버의 헤더를 조작하기 위한 Django 앱입니다.

pip install django-cors-headers

 

2. Settings의 installed apps 목록에 corsheaders를 추가합니다.

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

 

3. Settings의 Middlewar 목록 맨위에 아래의 코드를 추가합니다.

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', 
    'django.middleware.common.CommonMiddleware', 
    ...
]

 

4. Django settings에서 미들웨어 동작을 구성합니다.

CORS_ORIGIN_ALLOW_ALL = True # <- 모든 호스트 허용

#CORS_ORIGIN_ALLOW_ALL를 False로 하고 아래의 화이트리스트로 허용하고 싶은 호스트만 입력해 사용할 수 있습니다. 

CORS_ORIGIN_WHITELIST = (
    "http://localhost:8080",
    "http://127.0.0.1:9000",
    "https://example.com"
)

CORS_ORIGIN_WHITELIST에는 cross-site 요청을 허용하는 호스트들을 추가합니다. 

또는 모든 호스트를 허용하고 싶으면 CORS_ORIGIN_ALLOW_ALL을 True로 설정합니다. 만약 CORS_ORIGIN_ALLOW_ALL이 True 이면, whitelist는 쓰이지 않고, 모든 origin에서의 요청이 허용됩니다. 

CORS_ORIGIN_WHITELIST의 Default값은 False입니다.