[Django] 백엔드와 프론트엔드의 원활한 통신을 위한 브라우저 CORS정책 무력화하기

느려도 꾸준한 발걸음·2024년 7월 2일

Backend cors django-cors-headers

Django Web dev

목록 보기

9/12

프론트엔드와 백엔드의 원활한 통신을 위해선,
브라우저의 기본 동작인 CORS정책을 무력화시켜야 합니다.

CORS란?

간단히 말해서, 특정 데이터가 존재하는 url외의 주소에서 해당 데이터를 요청하면 데이터를 보내주지 않도록 브라우저가 막는 보안 기능입니다.

예를 들어, 데이터가 저장되어있는 백엔드의 url과, 백엔드의 데이터를 받아 화면에 렌더링 해야하는 프론트엔드의 url은 당연히 상이합니다.

이 때, 아무런 설정 없이 프론트엔드에서 백엔드로 데이터를 보내달라 요청하면,
브라우저가 이를 막고, 우리는 CORS에러를 마주합니다.

import React, { useState, useEffect } from "react";

const Post = () => {
  const [post, setPost] = useState([]);

  useEffect(() => {
    const postDataOriginUrl = "http://127.0.0.1:8000/api/";
    fetch(postDataOriginUrl)
      .then((resopnse) => resopnse.json())
      .then((data) => setPost(data));
  }, []);

  console.log(post);

  return (
    <div>
      {post.map((posting) => (
        <div key={posting.id}>
          <li>{posting.title}</li>
          <li>{posting.content}</li>
          <li>{posting.author}</li>
        </div>
      ))}
    </div>
  );
};

export default Post;

위와 같이, 장고 백엔드의 서버 url로 데이터 요청을 보냈더니,
콘솔에서 다음과 같은 에러 문구를 발견할 수 있습니다.

제 fetch요청이 CORS정책에 의해 blocked 된 것을 확인할 수 있습니다.

이는 브라우저의 디폴트 동작으로,
개발자는 별도의 설정을 통해 CORS 정책을 무력화시킬 수 있습니다.

django-cors-headers

저의 경우 프로젝트의 프론트엔드는 리액트, 백엔드는 장고로 개발하고 있는데요.
장고의 경우 django-cors-headers 를 설치해 CORS에러를 무력화시킬 수 있습니다.

1. 설치

pip install django-cors-headers

2. installed apps에 추가

settings.py 파일의 INSTALLED_APPS에 django-cors-headers를 추가해줘야 합니다.

INSTALLED_APPS = [
    "corsheaders",
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "myblog",
    "blog_api",
    "rest_framework",
]

최상단에 corsheaders 라는 이름으로 추가해줍니다.

3. 미들웨어 추가

이후, settings.py 파일의 MIDDLEWARE에 아래의 내용을 추가해줘야 합니다.

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
]

django-cors-headers의 공식문서를 보면,
미들웨어 설정의 최상단에 위치시키야 한다고 말하고 있습니다.

그렇지 않으면, 제대로 동작하지 않을 수 있다고 하니,
최상단에 작성해주세요.

4. allowed origins추가

settings.py에 CORS_ALLOWED_ORIGINS 라는 이름의 새로운 설정변수를 만들어주세요.

이곳에 장고 서버로의 접근을 허용할(CORS에러를 무력화시킬) url을 작성해주세요.
개발중인 프론트엔드 프로젝트의 url은 반드시 넣어주어야겠죠?

CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:8080",
    "http://127.0.0.1:9000",
    "http://localhost:3000",
]