[React] Django React CORS 해결하는 법

[React] Django React CORS 해결하는 법

Django와 React 연동 시 CORS가 발생 하였을 경우 추가해야할 설정

문제

React 서버를 기동 후 localhost:3000으로 Django의 127.0.0.1:8000을 호출할 때 CORS 에러가 발생한다.

이는 프론트는 3000번을 쓰고있지만 API는 8000번의 API를 호출하기 때문에 서로 다른 도메인에서 데이터를 호출하여 에러가 발생하는 것이다.

해결

1. django-cors-headers pip를 설치

pip install django-cors-headers

2. INSTALLED_APPS 추가

INSTALLED_APPS = [ # ... 생략 'corsheaders', # React와 연결 하기 위한 CORS 추가 2021.11.22 jsji ]

3. MIDDLEWARE 추가

MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', # React와 연결 하기 위한 CORS 추가 2021.11.22 jsji # ... 생략 ]

MIDDLEWARE에서 추가를 할 때에는 맨 위에다가 코드를 넣어 주어야 합니다.

4. MIDDLEWARE 추가

# React와 연결 하기 위한 CORS 추가 2021.11.22 jsji CORS_ORIGIN_WHITELIST = [ "http://localhost:3000", "http://127.0.0.1:8000", ]

CORS_ORIGIN_WHITELIST을 추가해 줍니다.

리엑트에서 연결하기 위한 로컬호스트 3000번, 장고에서 사용하는 로컬 호스트 8000번을 등록 한 뒤

http://localhost:3000을 접속하여 줍니다.

다시 접속해 보면 django views에서 넘긴 데이터를 Json으로 잘 받아옵니다!

from http://integer-ji.tistory.com/361 by ccl(A) rewrite - 2021-11-23 00:00:42