[#Python Django] React에서 Django에 API 요청 시 CORS Policy: No 'Access-Control-Allow-Origin' 에러 해결

 

 

 

 

 

CORS(Cross-Origin Resource Sharing) 

교차 출처 자원 공유

다른 도메인에서 실행 중인 웹 애플리케이션에서 선택된 자원에 대한 요청할 수 있게 허용하고, 접근 권한을 부여하는 구조이다

브라우저 간의 데이터를 주고받는 과정에서, 도메인 이름이 서로 다른 사이트 간에 API 요청을 할 때 공유를 설정하지 않았다면 CORS에러가 발생한다

 

 

 

 

 

그리고 CORS 에러가 발생했다

 

 

 

 

 

 

같은 localhost지만 localhost:8000과 localhost:3000는 출처가 다르다

그렇기 때문에 Same-orgin-policy 동일 출처 정책을 위반하게 되고, CORS 에러가 발생하게 된다

 

 

 

 

Django에서 요청을 허용해 주면 된다

 

① django-cors-headers 설치

pip install django-cors-headers 

 

 

 

 

 

 

② settings.py 수정

ALLOWED_HOSTS = ['localhost', '127.0.0.1', '127.0.0.1:3000', '127.0.0.1:8000']

INSTALLED_APPS = [
   ...
   'corsheaders',
]

MIDDLEWARE = [
   ...
   'corsheaders.middleware.CorsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

CORS_ORIGIN_WHITELIST = [
       'http://127.0.0.1:8000',
       'http://127.0.0.1:3000',
]

 

 

 

 

 

 

CORS 에러가 사라진 것을 확인할 수 있을 것이다