Django와 React 연결 시 발생하는 CORS 문제 해결 방법

문제

 

Django와 React를 연결하는 도중 아래와 같은 문제가 발생했다.

Django와 React 연결 시 발생하는 CORS 문제

이 문제는 React에서 Django 서버로 요청하는 과정에서 발생한 CORS(Cross-Origin Resource Sharing) 문제다. 이는 프런트엔드와 백엔드의 도메인이 다를 경우 브라우저가 요청을 차단하며 발생한다. 브라우저는 기본적으로 동일 출처 정책(Same-Origin Policy)을 강제하기 때문이다.

 

---

동일 출처 정책

동일 출처 정책은 보안을 강화하기 위해 클라이언트와 서버 간 출처(origin)가 다르면 요청을 차단하도록 설계된 보안 메커니즘이다. 이는 잠재적인 악성 문서를 격리하여 공격 벡터를 줄이는 데 도움을 준다.

 

예를 들어:

• Django 서버: http://127.0.0.1:8000
• React 클라이언트: http://localhost:3000

 

이처럼 포트 번호가 다르기 때문에 동일 출처로 간주되지 않아 React에서 Django로 요청 시 CORS 문제가 발생한다.

---

CORS 문제의 원리

Django 서버는 기본적으로 다른 출처에서 오는 요청을 허용하지 않는다. 즉, http://127.0.0.1:8000는 같은 URL 출처에서 온 요청만 허용한다. 따라서 React에서 Axios를 통해 Django로 요청을 보낼 때 CORS 문제가 발생하게 된다.

 

 

---

해결 방법

 CORS 문제를 해결하려면 Django 서버가 클라이언트(React)의 요청을 허용하도록 설정해야 한다. 이를 위해 django-cors-headers 라이브러리를 사용한다.

 

1. 라이브러리 설치 

pip install django-cors-headers

 

2. Django 설정 추가

#settings.py

# django-cors-headers 등록
INSTALLED_APPS = [
    ...
    'corsheaders',  
]


# 미들웨어 첫번째에 추가
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

 

 

3. 추가 설정 

 

a. 모든 출처 허용

#settings.py
#기본 값 False
CORS_ORIGIN_ALLOW_ALL = True

모든 경로의 URL을 혀용하는데 보안 위험이 있어 실제 배포환경에서는 사용하지 말자

 

 

b. 특정 출처만 허용

#settings.py
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
    'http://127.0.0.1:3000',
]

말 그래도 특정한 허용된 URL만 요청이 가능하다.

 

c. 쿠키 포함 허용

#settings.py
#기본 값 False
CORS_ALLOW_CREDENTIALS = True

Django에서 쿠키, 인증 정보, 세션과 같은 자격 증명(credentials)을 포함하는 요청을 허용 설정

---

결과

위 설정을 완료한 후 React에서 Django로 API 요청을 보낼 때 더 이상 CORS 오류가 발생하지 않고 데이터를 정상적으로 받아올 수 있다.