CORS

교차 출처 리소스 공유 (Cross-Origin Resource Sharing, CORS)

CORS 정책은 우리가 가져오는 리소스들이 안전한지 검사하는 관문이다.

cors는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이

다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

* 기본적으로 브라우저는 다른 출처의 HTTP 요청을(다른 출처의 리소스) 제한하는데, 제한을 풀어준다라고 생각하자. 

 

웹에는 크게 SOP(Same Origin Policy)와 CORS(Cross Origin Resurce Sharing) 두가지 정책이 있다.

프로토콜, 포트, 호스트 모두 일치한다면 Same Origin이며,

이들중 하나라도 일치하지 않으면 Cross Origin 이 된다.

* 출처는(Origin) Protolcol 과 Host 그리고 Port까지 모두 합친 것을 의미한다.

* 브라우저가 CORS정책 위반을 분석하는 시간은 서버의 응답이 도착한 이후이다.

즉, CORS정책을 위반하는 리소스 요청때문에 에러가 발생하더라도 서버 쪽 로그에서는 정상응답을 했다는 로그가 남는다.

프론트 서버의 URL이 http://localhost:3000이고, 
백엔드 서버가 http://localhost:8080에 띄워져 있다고 하면

이때 프론트 서버와 백엔드 서버는 다른 출처 (Origin)으로써 Same-Origin Policy 정책을 어긋나기 때문에, 서버로부터 응답이 넘어올 때 브라우저에서 CORS Policy 오류를 발생시키게 된다.

 

장고 cors 실습

1. cors-headers 를 install 해준다.

pip install django-cors-headers

 

2. settings.py 의 INSTALLED_APPS 에 cors-headers 를 추가해준다.

# settings.py
INSTALLED_APPS = [
'corsheaders',
]

 

3. settings.py 의 MIDDLEWARE 에 CorsMiddleware 를 추가한다.

# settings.py
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
# CommonMiddleware 보다 반드시 위에 추가해 주어야 한다.
'django.middleware.common.CommonMiddleware',
]

 

4. settings.py의 아랫쪽에 CORS_ALLOWED_ORGINS 를 추가해서, 포트를 열어준다.

* 화이트 리스트와 기능이 동일하다.

 

 

---

참조 자료 

출처: https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

출처: https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

출처: https://inpa.tistory.com/entry/WEB-📚-CORS-💯-정리-해결-방법-👏 [👨‍💻 Dev Scroll:티스토리]