[DRF] CORS에러 처리하기

얼마전 면접을 봤던 회사에서 CORS를 처리한 경험을 말해달라고 했다. CORS에 대해서 간략하게만 알고 있었고, Django에서는 프론트엔드와 백엔드가 분리되어 있지 않다보니 CORS 에러를 경험하지 못했고, 제대로 된 답변을 하지 못했다. 탈탈털린 경험을 바탕으로 오늘은 CORS에 대해서 정리해보고자 한다.

✅ CORS란?

CORS란 Cross-Origin Resource Sharing의 약자로, 의미 그대로 서로 다른 출처에서 리소스를 공유하는 것을 CORS라고 한다. CORS는 출처가 다른 자원들을 공유한다는 뜻으로 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. 

 

하지만 CORS를 위해서는 별도의 설정이 필요하다. 필요한 설정을 하지 않은 채 서로 다른 출처에서 리소스를 공유하려고 하면 에러가 발생할 수 있다.

 

일반적으로 백엔드 개발을 하면서 사용하는 URL은 http://localhost:8000/ 이고 프론트엔드의 URL은 http://localhost:3000/ 을 많이 사용한다. 이렇게 URL의 차이가 있지만 별도의 설정을 하지 않았기 때문에 백엔드와 프론트엔드를 바로 연결하려고 하면 문제가 생긴다. 이러한 문제를 CORS 에러라고 한다.

✅ DRF에서 CORS 처리하기

Django에서 CORS 에러를 해결하기 위해서는 라이브러리 설치가 필요하다. 

pip install django-cors-headers

라이브러리를 설치 후 settings.py 파일에 아래와 같이 코드를 추가해준다.

INSTALLED_APPS = [
	...,
    'corsheaders',
]

MIDDLEWARE = [
	# 최상단에 작성
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
	'http://localhost:3000',
]

CORS_ALLOWED_ORIGINS 목록에 API 요청을 허용하고 싶은 출처를 입력하면 된다.

 

CORS에 대해 자세히 정리한 블로그가 있어 추가적으로 공부하고 싶다면 아래에서 공부하면 좋을 것 같다.

📚 Reference

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏