23.04.19 TIL(CORS)

오늘 한 것 

DRF 강의 3주차 5강

페어프로그래밍

코테풀이

선발대 강의 수강: Asyncio, 패키지 

CORS 오류

청CORS

강의를 따라하는 도중 프론트엔드(live server)에서 장고 서버에 GET요청을 보내자 브라우저에서 위와같이 오류가 발생한다. 이 오류가 왜 발생하는지 강의에서 간단하게 설명해주시긴 했지만 좀더 자세히 알아보기로 했다.

 

CORS(Cross Origin Resource Sharing)는 말 그대로 '출처'가 다른 리소스의 공유를 제한적으로 허용하기 위한 정책이다.

다른 출처로의 리소스 요청에 대한 정책은 SOP 와 CORS가 존재하는데, 전자는 일부 예외만 빼면 같은 출처에서만 리소스를 공유할 수 있다는 정책이다. 다른 출처의 어플리케이션이 서로 통신하는 것에 대해 아무런 제약도 존재하지 않는다면, CSRF같은 공격에 노출될 수 있다. 그러나  웹 환경에서 다른 출처에 있는 리소스를 공유하는 것을 다 막는건 어려우므로 SOP의 예외 조항중 하나로서 CORS를 지킨 리소스 요청은 출처가 달라도 허용 된다.

 

출처란

출처는 프로토콜 종류(http, https 등), 호스트 주소(naver.com 등), 포트번호 세가지로 구별된다. 셋중 하나가 다르다면 다른 출처로 인식된다.

이번에 프론트엔드에서 보낸 요청의 origin 헤더 값은 로컬호스트의 5500 번 포트이다.

이후 서버가 응답을 보낼 때 응답 헤더에 해당 리소스에 허용된 출처를 알려주는 Access-Control-Allow-Origin 헤더값을 참조한다.

그런데 request를 보내는 곳은 8000번 포트이고, Access-Control-Allow-Origin이 없고 same origin만 받는 다고 하니 정책을위반했다고 판단하여 브라우저가 데이터를 받아들이지 않은 것이다.

 

해결

CORS 오류를 해결하는 방법은 백엔드에서 Access-Control-Allow-Origin를 잘 지정하는 것이다. DRF 서버에서는 django-cors-headers 를 설치해 해결한다.

pip install django-cors-headers

설치 후 settings.py에 설정을 추가해준다.

INSTALLED_APPS =[
	...
	'corsheaders', # CORS 관련 추가
]

...

MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware',
	"django.middleware.common.CommonMiddleware", # 이것보다 가능한한 위에
    ...
]
...

CORS_ORIGIN_WHITELIST = ['http://127.0.0.1:3000'
                         ,'http://localhost:3000']
CORS_ALLOW_CREDENTIALS = True
# CORS_ALLOW_ALL_ORIGINS = True # 모든 origin 허용