CORS 오류 해결(feat.REST API 통신 오류 )

 

프론트와 백엔드를 REST API로 연결하여 개발할 때, 서버를 돌려 브라우저에서 확인해보면 CORS 오류를 마주할 때가 있습니다.

 

CORS 오류

 

Cross-Origin Resource Sharing CORS에러는 외부에서 다른 도메인이

내 로컬 서버에 데이터를 요청할 때 이를 허용하지 않아 생기는 오류입니다.

 

즉, Javascript의 동일 출처 정책에 따라 도메인이 다른 서버로부터 요청을 받으면,

보안 문제로 간주하여 CORS 이슈를 발생시키고 이를 차단합니다.

 

예를 들어 프론트(클라이언트) 서버는 localhost:8080이고 백엔드(외부) 서버는 localhost:8000이면,

포트가 달라서 CORS가 발생할 수 있습니다.

 

이러한 경우 외부 서버에서 보내는 요청의 헤더(Access-Control-Allow-Origin response 헤더)에 

cross origin HTTP 요청을 허가해 접근을 허락하면 됩니다.

 

-해결방법 참고-

https://pypi.org/project/django-cors-headers/

django-cors-headers

 

해결방법은 

Django에서 django-cors-headers를 설치해주고 settings에 추가를 해주어야 합니다.

django-cors-headers는 Cross-Origin Resource Sharing(CORS) 에 필요한 서버의 헤더를 조작하기 위한 Django 앱이다.

$ pip install django-cors-headers

pip으로 패키지 설치가 완료되면, settings.py에 가서 

 

1. INSTALLED_APPS에 맨 마지막줄에 있는 corsheaders를 등록합니다.

 

settings.py에 CORS 등록하기

 

2. MIDDLEWARE에도 바로 맨 위 줄에 아래처럼 추가를 합니다.

settings.py MIDDLEWARE에 추가하기

 

3. 마지막으로 맨 아래 쪽에 STATIC_URL 밑에 아무 곳에다가 147번째 줄을 추가해주면 됩니다.

 

 

이상 오늘의 삽질일기 끝!

---

여기저기 삽질도 해보고

날려도 먹으면서

배우는 게

결국 남는거다

- Z.Sabziller