[Django] CORS (Cross-Origin Resource Sharing)

CORS 

교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.

 

 

URL 구조

 

출처(origin)라는 말이 어려운데 출처란 위 그림(URL 구조)에서의  Protocol과 Host, Port까지 모두 합친 것을 의미

 

 

CORS 동작 원리

https://ko.wikipedia.org/wiki/%EA%B5%90%EC%B0%A8_%EC%B6%9C%EC%B2%98_%EB%A6%AC%EC%86%8C%EC%8A%A4_%EA%B3%B5%EC%9C%A0

 

 

예를 들면 다음과 같을 때 발생한다.

• 다른 도메인(예: example.com에서 test.com으로)
• 다른 하위 도메인(예: example.com에서 petstore.example.com으로)
• 다른 포트(예: example.com에서 example.com:10777으로)
• 다른 프로토콜(예: https://example.com에서 http://example.com으로)

 

이렇게 console에 보면 오류가 발생한 것을 확인할 수 있다.

 

 

솔직히 아직도 좀 어려운게.. 이게 발생하는 게 case by case 인 것 같아서..

React Native 에서 Api 통신할 땐 발생 안 하는 것 같고.. 웹에서는 발생할 때도 있고 발생 안 할 때도 있는 것 같다. 

경험해 본 사람들은 이렇게 case by case라고 느껴지지 않나??

내가 정확히 이해를 못해서 그럴 수도 있고..

 

 

Django 

해결방법은 Django 사용하는 사람들이면 전부 이 라이브러리를 사용할 것이다.

https://github.com/adamchainz/django-cors-headers

GitHub - adamchainz/django-cors-headers: Django app for handling the server headers required for Cross-Origin Resource Sharing (

 

1. 설치

pip install django-cors-headers

 

2. 설정 (settings.py)

INSTALLED_APPS = [
    ...,
    "corsheaders",
    ...,
]

...

...

...


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

3. 옵션 설정 (settings.py)

• CORS_ALLOWED_ORIGINS
• CORS_ALLOWED_ORIGIN_REGEXES
• CORS_ALLOW_ALL_ORIGINS

3가지 중 1가지 이상은 적용을 해야 한다.

 

예시를 몇가지 보면

 

1) 이전에 CORS_ORIGIN_WHITELIST라고 불렸던 것으로 직접 URL 목록을 입력

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

2) 정규 표현식으로 많은 수의 하위 도메인이 있을 때 유용한 방식

CORS_ALLOWED_ORIGIN_REGEXES = [
    r"^https://\w+\.example\.com$",
]

3) 전부 허용

CORS_ALLOW_ALL_ORIGINS = True


# CORS_ALLOW_CREDENTIALS = True  같이 설정을 해줘야 되는 경우가 많다. (cookie 관련)

위 github 들어가서 도큐먼트를 살펴 보면 어떤 methods 만 허용을 할 것인지

CORS 허용 api url 정규식, 헤더 (Headers) 설정 등..  여러 가지가 많다.

한번 살펴 보고 CORS는 개발을 하다 보면 많이 겪는 문제인데
그냥 라이브러리를 설치해서 "아 해결 했구나" 가 아닌 더 깊게 공부할 필요가 있는 것 같다.