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

Django와 프론트엔드가 서로 다른 도메인 또는 포트에서 실행될 때, CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있다.

 

이 글에서는 Django 프로젝트에서 CORS 오류를 해결하는 방법을 알아본다.

 

1. CORS 오류란?

 

CORS 오류는 브라우저 보안 정책으로 인해 발생한다.

백엔드(Django)와 프론트엔드(React, Vue, Angular 등)가 서로 다른 도메인에서 실행될 경우, 브라우저는 기본적으로 교차 출처 요청을 차단한다.

 

예를 들어,

• 백엔드(Django): http://localhost:8000
• 프론트엔드(Vue.js): http://localhost:8080

위와 같이 도메인 또는 포트가 다를 경우, 브라우저는 이를 보안 위협으로 인식하여 요청을 차단할 수 있다.

이를 해결하려면 Django에서 CORS 설정을 추가해야 한다.

 

2. CORS 설정을 위한 패키지 설치

 

📌 1) 가상환경 활성화

 

먼저, Django 프로젝트의 가상환경을 활성화한다.

 

Mac/Linux (bash/zsh)

source venv/bin/activate

 

Windows (cmd)

venv\Scripts\activate

 

Windows (PowerShell)

venv\Scripts\Activate.ps1

 

가상환경에 진입하면 (venv) 같은 프롬프트가 나타난다.

예제에서는 (pubd_api)라는 가상환경을 사용하고 있다.

 

📌 2) CORS 패키지 설치

 

가상환경에서 django-cors-headers 패키지를 설치한다.

pip install django-cors-headers

 

설치가 정상적으로 완료되면 아래와 같은 메시지가 출력된다.

Successfully installed django-cors-headers-4.4.0

 

이제 Django 프로젝트에서 CORS 설정을 추가할 수 있다.

 

3. Django 프로젝트 설정 (settings.py 수정)

 

📌 1) INSTALLED_APPS에 ‘corsheaders’ 추가

 

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',  # CORS 설정 추가
]

 

📌 2) MIDDLEWARE 설정

 

CORS 처리를 위한 CorsMiddleware를 MIDDLEWARE에 추가한다.

 

⚠️ 주의:

'corsheaders.middleware.CorsMiddleware'는 반드시 가장 위쪽에 추가해야 한다.

그렇지 않으면 CORS 설정이 적용되지 않을 수 있다.

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',
]

 

📌 3) CORS 설정 추가

 

settings.py 하단에 CORS 관련 설정을 추가한다.

# 모든 도메인의 요청 허용 여부 (보안상 False 권장)
CORS_ORIGIN_ALLOW_ALL = False  

# 허용할 도메인 리스트
CORS_ALLOWED_ORIGINS = [
    "http://localhost:8000",  # 프론트엔드 도메인 (예: Vue.js)
    "http://localhost:8080",  # 프론트엔드 도메인 (예: React)
]

# 쿠키 포함 요청 허용 여부
CORS_ALLOW_CREDENTIALS = True  

# 허용할 HTTP 메서드 (GET, POST, PUT, DELETE 등)
CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]

# 허용할 HTTP 헤더
CORS_ALLOW_HEADERS = [
    "accept",
    "authorization",
    "content-type",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

 

4. 설정 적용 후 서버 재시작

 

설정을 적용하기 위해 Django 서버를 다시 실행한다.

python manage.py runserver

 

이제 프론트엔드와 백엔드 간의 CORS 오류가 해결되었다. 🎉

 

5. 마무리

 

이제 Django 백엔드에서 CORS 오류 없이 프론트엔드와 데이터를 주고받을 수 있다.

 

다음 글에서는 아래 내용을 다룰 예정이다. 🚀

• Django에서 국회도서관 API를 호출하는 방법
• API 키를 안전하게 관리하는 방법

👉 다음 글에서 계속! 🔥