[웹 서비스 A-Z][Django] #10 CORS

지난 시간까지 간단한 API를 만들고 테스트까지 해보았습니다.

이번 시간에는 CORS가 무엇인지 그리고 Django에서 CORS를 어떻게 다룰 수 있는지 설명하도록 하겠습니다.

CORS는 Cross-Origin Resource Sharing의 약자로써, 다른 출처 리소스 공유를 의미합니다. 일반적으로 브라우저에서는 보안사고를 방지하기 위해 동일 출처 정책을 가지고 있는데, 다른 출처와 공유를 하기 위해 CORS 정책을 설정한다면 다른 출처로 요청 및 응답을 받을 수 있게 됩니다.

여기서 같은 출처란, Protocol, Host, Port가 같은 것을 의미합니다.

• http://example.com/3000/api-a
• http://example.com/3000/api-b

위의 2개의 URL은 같은 출처입니다. Protocol(http), Host(example.com), Port(3000)가 동일하기 때문입니다.

CORS에 대한 더 자세한 내용은 https://escapefromcoding.tistory.com/724 에서 확인할 수 있습니다.

Frontend인 Vuejs에서는 8080 포트를 사용합니다. 그래서 Django의 8000번 포트로 요청을 보내면 다른 출처로 간주됩니다.

Django 에서 다른 출처 허용을 해주도록 하겠습니다.

File>Settings>project:[project name]>Python Interpreter 에서 django-cors-headers를 검색해서 Install 하거나, 아래 명령어를 칩니다.

python -m pip install django-cors-headers

그리고 나서, settings.py의 INSTALLED_APPS 제일 상단에 ‘corsheaders’ 를 추가해 줍니다.

 INSTALLED_APPS = [
    'corsheaders',
    ``` 중략 ```
]

그리고 MIDDLEWARE 부분에 아래 2개를 추가해줍니다. 있다면, 괜찮습니다.

• "corsheaders.middleware.CorsMiddleware" (CommonMiddleware 또는 Whitenoise의 WhiteNoiseMiddleware 와 같은 응답을 생성할 수 있는 미들웨어 앞에 가능한 한 높게 배치해야 합니다 .)
• "django.middleware.common.CommonMiddleware"

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

그리고 settings.py 하단에 CORS_ORIGIN_WHITELIST 와 CORS_ALLOW_CREDENTIALS 를 적어줍니다.

CORS_ORIGIN_WHITELIST = ['<http://127.0.0.1:8080>', '<http://localhost:8080>']
CORS_ALLOW_CREDENTIALS = True

이제 WHITELIST에 지정해둔 Origin에서 Django 애플리케이션에 대한 브라우저 내 요청을 허용합니다.

WHITELIST에는 localhost에 대한 Origin만 넣어주었는데요, 추후 상용화시 상용버전의 Origin을 추가해주면 됩니다.

오늘 시간에는 가볍게 CORS에 대해서 알아보았는데요, 다음 시간에는 DB 연결을 해보도록 하겠습니다.

감사합니다.

Additional

django-cors-header에 대한 자세한 내용은 https://pypi.org/project/django-cors-headers/ 에서 확인해보시면 될 것 같습니다.

그리고 화이트리스트 기반이 아닌, 모든 origin으로 부터 허용을 하고 싶다면, 아래처럼 사용할 수도 있습니다.

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'cache-control',
    'content-type',
    'dnt',
    'origin',
    'postman-token',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

감사합니다.