Django 마이크로식 개발 중 CORS Access-Control-Allow-Origin 에러

django를 배우던 중 django로는 BE만 만들고 data를 발송, 따로 구성한 FE 페이지에서 해당 data를 받아 페이지에 뿌리는 방식을 배웠습니다...만 실습 중 다음과 같은 에러를 마주했습니다.

Access to fetch at ‘https://~~~’ from origin ‘http://~~~’ 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.

<CORS 에러 메시지>

검색해보니 웹 개발을 하다보면 반드시 마주치는 XX같은 에러로 유명했습니다. 웹개발의 신고식이라는군요?

CORS는 Cross-Origien Resource Sharing의 함축단어로서, 간단히 말하면 같은 출처(URL이라고 보면 되겠습니다.) 외의 곳에서는 리소스를 받아올 수 없도록 하는 정책을 의미합니다. 보안의 문제겠군요!

에러의 종류도 여럿 존재하고, 더 찾아봐야겠지만 해당 에러에 대한 해결방법은 다음과 같습니다.

<해결>

django-cors-headers를 설치 후 다음과 같이 설정합니다.

# 프로젝트의 settings.py
# 설치된 앱에 'corsheaders' 추가
# 아래와 같이 주석으로 구분해두면 편합니다.
INSTALLED_APPS = [
	...
	# django lib app
    'corsheaders',
    # custom app
    'main',
    ...
]

# MIDDLEWARE 최상단에 다음 문구 추가
# MIDDLEWARE의 경우 순서가 중요하다는 듯 합니다.
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware'
    ...
]

# CORS 허용 여부로, True를 적용하면 모든 것을 허용합니다. 그럴 경우 아래의 WHITELIST코드는 필요 없습니다.
CORS_ORIGIN_ALLOW_ALL = False

# 요청을 보낼 페이지의 주소 입력
CORS_ORIGIN_WHITELIST = (
	'http://~~~',
)

# 필요한 경우 아래의 구문들도 추가할 수 있습니다.
# 쿠키도 요청에 포함시켜야할 경우
CORS_ALLOW_CREDENTIALS = True

# 요청에 허용시킬 HTTP 동사
CORS_ALLOW_METHOS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    ...# 입력
]
# 또는 아래와 같이 import 후
# from corsheaders.defaults import default_methods
CORS_ALLOW_METHODS = list(default_methods) + [
    '추가',
]