useEffect를 이용해서 fetching을 시도했더니 CORS 에러가 뜬다.

CORS?

Cross Origin Resource Sharing의 약자로, 교차 출처 리소스 공유라고도 한다.
한 도메인이 다른 도메인을 가진 리소스에 액세스할 수 있게 하는 보안 메커니즘이다. 특정 교차 도메인간 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다.

동일-출처 보안 정책은 웹의 중요한 보안모델이고, 주로 스크립트로부터의 데이터 접근에 적용된다. 동일한 출처의 리소스에만 접근하도록 제한하는 정책이다.
출처란 프로토콜 / 호스트 / 포스트를 의미하며 모두 동일해야 한다.

Django서버 API를 React프론트에 fetch하기 위해서는 허용 작업이 필요하다.

django-cors-headers

poetry add django-cors-headers
특정 도메인에서 우리 서버에서 브라우저로 fetch할 수 있는 사람을 지정할 수 있게 해준다.
install 이후 config.settings 에 다음을 따른다.(경로는 본인 로컬주소 기준)

• INSTALLED_APPS에 "corsheaders" 추가
• MIDDLEWARE에 "corsheaders.middleware.CorsMiddleware" 추가
• 최하단에 CORS_ALLOWED_ORIGINS = ["http://localhost:3000"] 추가

이후 fetch를 다시 시도하면 정상적으로 작동된다.