front에서 backend 서버로 요청을 보낼때 CORS 오류가 일어나는것을 접할 수 있다.
이 오류는 SOP와 CORS가 무엇인지 알면 해결방법을 쉽게 찾아 적용할 수 있다.
SOP와 CORS 정책
먼저 SOP와 CORS가 무엇인지 살펴보자
- SOP : Same Origin Policy (동일 출처 정책)
- CORS : Cross Origin Resources Sharing (교차 출처 리소스 공유)
front에서 요청을 보내는것은 브라우저가 요청을 보낸것을 말한다.
이때 브라우저는 기본적으로 같은 출처간에 리소스를 공유하는것이 기본 원칙으로 되어있다.
하지만 front에서는 다른 출처의 리소스를 받아와서 보여줘야하는 일이 생기게 되는데 이때 SOP에 의해 차단되는것이다.
그러면 다른 출처의 리소스를 받아올 수 없는것일까?
이때 설정을 해줘야하는것이 CORS 이다.
“ 원래는 같은 출처의 리소스를 공유하는것이 원칙이지만(SOP) 서버에서 CORS 설정으로 다른 출처의 리소스를 받아오는것을 허용한다면 가능하게 해줄게~ “
출처 판단 방법
두 정책에서 공통적으로 판단하는 ‘출처’는 어떻게 같고 다른지 아는걸까?
브라우저가 출처를 판단할때 보는것은 3가지이며 모두 같아야 같은 출처로 판단한다.
- 스킴 (Scheme)
- 호스트 (Host)
- 포트 (Port)
예를 들어 http://front-test:3000의 프론트 서버에서
http://backend-test:8000의 백엔드 서버로 요청을 보낸다고 생각해보자
이때 스킴은 http로 같지만 호스트와 포트가 다르기 때문에 출처가 다르다고 판단한다.
그렇다면 이것은 같은 출처일까?
결론적으로 말하자면 브라우저는 다른 출처로 판단하게된다.
두 주소의 스킴과 포트는 동일하지만 Host의 문자열이 서로 다르기 때문이라고 한다.
주소상 로컬호스트를 가리키지만 기술적으로 브라우저는 다른 출처로 인식하기 때문에 로컬 서버에서 개발할때 이 부분을 생각하고 설정을 해주어야한다.
CORS 설정 방법
여러 백엔드 프레임워크 Spring, Django, Express에서 cors 설정하는 방법을 제시하고 있다.
그 중 Django에서 설정하는 방법을 알아보자
- django-cors-headers 설치
pip install django-cors-headers- settings.py에 설정 추가
INSTALLED_APPS = [
'corsheaders',
...
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 상단에 위치하는것을 추천
...
]2-1 [필수] CORS 허용 출처 등록
- CORS_ALLOW_ALL_ORIGINS
- CORS_ALLOWED_ORIGIN_REGEXES
- CORS_ALLOW_ALL_ORIGINS
3개 중 하나를 필수로 등록해야함
CORS_ALLOWED_ORIGINS = [
"https://example.com",
"https://sub.example.com",
"http://localhost:8080",
"http://127.0.0.1:9000",
]
# 정규 표현식을 사용한 출처 등록 방법
CORS_ALLOWED_ORIGIN_REGEXES = [
r"^https://\w+\.example\.com$",
]
# https://로 시작하고, 그 뒤에 하나 이상의 문자로 이루어진 서브 도메인이 있으며,
# example.com으로 끝나는 출처에 대해 허용
CORS_ALLOW_ALL_ORIGINS = True # 모든 출처 허용
2-2 [선택] CORS 옵션
옵션을 설정하지 않아도 기본값으로도 충분하지만 설정 할려면 할 수 있다.
CORS_URLS_REGEX: CORS 헤더가 전송될 URL을 제한하는 정규식 설정CORS_ALLOW_METHODS: 요청에 허용되는 http 매서드 설정CORS_ALLOW_HEADERS: 요청에 허용되는 http 헤더 설정
등등 다른 옵션도 설정 가능하다. 더 자세한 내용은 참고자료의 django-cors-headers 깃헙에서 볼 수 있다.
참고 자료
https://github.com/adamchainz/django-cors-headers
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://velog.io/@effirin/CORS란-무엇인가
