[Trouble shooting] Django CORS 이슈

프로젝트를 진행할 때마다 겪었던 에러지만 언제나 명확한 해결법이 있었기에 제대로 들여다보지 않았던 문제입니다.

이번에 리액트와 장고를 이용한 프로젝트를 진행 중에 있는데 같은 문제가 생겨서 내용을 남깁니다.

 

CORS는 Cross Origin Resource Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘이다.

이때 요청을 할 때는 cross-origin HTTP에 의해 요청됩니다.

하지만 동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생하면 외부 서버에 요청한 데이터를 브라우저에서 보안 목적으로 차단합니다. 그로 인해 정상적으로 데이터를 받을 수 없습니다.

문제

localhost/:1 Access to fetch at 'http://127.0.0.1:8000/api/notes/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

문제 해결

https://github.com/adamchainz/django-cors-headers/blob/main/src/corsheaders/middleware.py

GitHub - adamchainz/django-cors-headers: Django app for handling the server headers required for Cross-Origin Resource Sharing (

cross origin HTTP 요청을 허가해주는 방법으로 문제를 해결할 수 있습니다.

첫 번째로는 django-cors-heagers를 설치합니다.

python -m pip install django-cors-headers

두 번째로는 INSTALLED_APPS에 corsheaders를 추가합니다.

세 번째로는 밑의 내용을 MIDDLEWARE에 추가합니다.

"corsheaders.middleware.CorsMiddleware",

네 번째로 WHITELIST에 자신이 사용하는 IP와 포트 정보를 입력해주면 해당 IP의 포트에서 요청하는 것은 허용이 되면서 정상 작동을 하는 것을 볼 수 있습니다.

두 번째와 세 번째는 원래 있는 항목에 추가하는 방식으로 진행하면 되고 네 번째는 새로 추가하는 내용입니다.