django cors 크로스 도메인 오류 해결 #6

cors 오류

django와 Front-End와 통신하다 보면 도메인이나 포트가 달라서 cors 오류가 발생될 수 있다.

그래서, 이번에는 django 에 cors 오류를 해결하기 위한 세팅을 한다.

 

먼저 django cors 정보는 아래 URL에서 자세히 확인할 수 있다.

☞ https://pypi.org/project/django-cors-headers/

Setup cors

• 이전에 설치한 가상환경으로 이동한다.
• 가상환경에서 cors-headers 설치한다.
  • python3 -m pip install django-cors-headers

(pubd_api) pubdapi % ls
db.sqlite3	manage.py	pubdapi		pubdapp
(pubd_api) pubdapi % python3 -m pip install django-cors-headers
Collecting django-cors-headers
  Using cached django_cors_headers-4.4.0-py3-none-any.whl.metadata (16 kB)
Requirement already satisfied: asgiref>=3.6 in /public_data/pubd_api/lib/python3.12/site-packages (from django-cors-headers) (3.8.1)
Requirement already satisfied: django>=3.2 in /public_data/pubd_api/lib/python3.12/site-packages (from django-cors-headers) (5.0.6)
Requirement already satisfied: sqlparse>=0.3.1 in /public_data/pubd_api/lib/python3.12/site-packages (from django>=3.2->django-cors-headers) (0.5.1)
Using cached django_cors_headers-4.4.0-py3-none-any.whl (12 kB)
Installing collected packages: django-cors-headers
Successfully installed django-cors-headers-4.4.0
(pubd_api) pubdapi %

settings.py 수정

• installed apps 추가
  • 'corsheaders',

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
]

• middleware 추가
  • CorsMiddleware는 가능한 한 높은 곳에 배치해야 한다.
    • 'corsheaders.middleware.CorsMiddleware',
  • 특히 django의 CommonMiddleware 나 Whitenoise의 WhiteNoiseMiddleware와 같이 응답을 생성할 수 있는 모든 미들웨어보다 앞서야 한다. 그렇지 않으면 이러한 응답에 CORS 헤더를 추가할 수 없다.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

• MIDDLEWARE 하단에 옵션들 기재
  • CORS_ORIGIN_ALLOW_ALL = false
    whitelist 무시, 모든 origin 요청 허용
  • CORS_ALLOWED_ORIGINS 에 허용 도메인 입력
    이전에는 CORS_ORIGIN_WHITELIST 였으며, 별칭으로 사용가능하나 새로운 이름이 선 적용됨
  • CORS_ALLOW_CREDENTIALS = true
    쿠키를 HTTP 요청에 포함시키지 않으려면 false
  • CORS_ALLOW_METHODS
    실제 요청에 허용되는 HTTP 동사들 목록
  • CORS_ALLOW_HEADERS
    브라우저의 요청에서 허용하는 비표준 HTTP 헤더 목록

#whitelist 무시, 모든 origin 요청 허용
CORS_ORIGIN_ALLOW_ALL = False
#쿠키를 HTTP 요청에 포함시키지 않으려면 false
CORS_ALLOW_CREDENTIALS = True
#허용 도메인 입력 whitelist
#이전에는 CORS_ORIGIN_WHITELIST 였으며, 별칭으로 사용가능하나 새로운 이름이 선 적용됨
CORS_ALLOWED_ORIGINS = [
    "http://localhost:8000", #front-end 도메인 포트
    "http://localhost:8080", #front-end 도메인 포트
]
#실제 요청에 허용되는 HTTP 동사들 목록
CORS_ALLOW_METHODS = (
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
)
#브라우저의 요청에서 허용하는 비표준 HTTP 헤더 목록
CORS_ALLOW_HEADERS = (
    "accept",
    "authorization",
    "content-type",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
)

마무리

이로써, 크로스 도메인 cors 문제는 해결되었다.

다음으로 django 에서 국회도서관 API를 호출하는 코드를 작성한다.

 

☞ python, django 설치는 이전 글 참고

https://yuneenelife.tistory.com/entry/API-Server-django-python-Framework-설치-1

API Server django python Framework 설치 #1