웹서버 개발 시 프론트 서버와의 통신을 하기 위해서 기본 django setting 상으로 실행을 해보면

Reason: CORS header 'Access-Control-Allow-Origin' missing

요런 에러가 뜨면서 백엔드에서 세팅한 json 데이터를 파싱할 수 없게 된다.

>> 여기서 Origin이란?

Origin은 간단하게 프로토콜, 주소, 포트번호의 쌍을 말한다.
Origin = [프로토콜]://[Host의 IP 주소 또는 URL]:[포트번호]
여기서 포트 번호는 생략 가능하다. 생략하면 HTTP 방식으로 오면 80, HTTPS 방식으로 오면 443을 이용하게 된다.
다른 Origin이라고 하면 프로토콜(HTTP, HTTPS)이 다르거나 주소(a.com, b, com,…)가 다르거나 포트번호(80, 433,…)가 다르다는 말이다.
그래서 django의 8000포트와 vue, react의 3000포트 연결 할 때도 같은 로컬이지만 CORS error가 발생하게 된다.

django에서 프론트 서버로 혹은 프론트 서버에서 django 서버로 http 요청을 한다면 CORS header 설정을 통해 허용 해줘야한다.

1. CORS in Django

pip install django-cors-headers

그리고 settings 에 installed apps 에 추가한다.

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

추가로 middleware에도 추가 해준다.

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

다음에 세 가지 설정 중 하나 이상을 추가해줘야 원하는 CORS 세팅이 된다

• CORS_ALLOWED_ORIGINS
• CORS_ALLOWED_ORIGIN_REGEXES
• CORS_ALLOW_ALL_ORIGINS

1. CORS_ALLOWED_ORIGINS

허용할 Origin 사이트 list를 적어주면 된다. (응답 헤더)

CORS_ALLOWED_ORIGINS = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:8080",
    "http://127.0.0.1:9000"
]CORS_ALLOWED_ORIGINS = ["*"] - 모두 허용

이전 버전에서는 CORS_ORIGIN_WHITELIST라 칭했는데 이 것도 설정이 먹힌다. but CORS_ALLOWED_ORIGINS가 먼저 적용된다.

2. CORS_ALLOWED_ORIGIN_REGEXES

허용할 Origin 사이트 list를 정규식을 통한 문자열 목록으로 표현한다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

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

많은 수의 하위 도메인이 존재하는 경우 유용한 방법이며, CORS_ORIGIN_REGEX_WHITELIST가 작동한다.

3. CORS_ALLOW_ALL_ORIGINS

ALL Origin 허용하는 것으로 default는 false로 되어 있다.

선택적으로 설정할 수 있는 값

• CORS_URLS_REGEX

CORS 헤더가 전송 될 URL을 제한하는 정규식입니다.

CORS_URLS_REGEX  =  r '^ / api /.*$'

• CORS_ALLOW_METHODS

실제 요청에 허용되는 HTTP 동사 목록입니다. 기본값 :

CORS_ALLOW_METHODS  =  [ 
    'DELETE' , 
    'GET' , 
    'OPTIONS' , 
    'PATCH' , 
    'POST' , 
    'PUT' , 
]

• CORS_ALLOW_HEADERS

실제 요청시 사용가능한 비표준 HTTP 헤어목록 : default

CORS_ALLOW_HEADERS  =  [ 
    'accept' , 
    'accept-encoding' , 
    'authorization' , 
    'content-type' , 
    'dnt' , 
    'origin' , 
    'user-agent' , 
    'x-csrftoken' , 
    'x-requested-with' , 
]

• CORS_PREFLIGHT_MAX_AGE

클라이언트 / 브라우저가 프리 플라이트 응답을 캐시 할 수있는 시간 (초)입니다. 이것이 0 (또는 거짓 값)이면 max age 헤더가 전송되지 않습니다. 기본값은 86400 (1 일)입니다.

• CORS_ALLOW_CREDENTIALS

True 인 경우 쿠키가 사이트 간 HTTP 요청에 포함되도록 허용됩니다

Django CSRF와 연동

• CSRF_TRUSTED_ORIGINS — Django에서 제공하는 CSRF를 CORS 구성을 통해 보안 요청에서 수행하는지 확인하기 위한 설정
• CORS_REPLACE_HTTPS_REFERER — django 1.9 이하에서

CORS_ALLOWED_ORIGINS  =  [ 
    'http://read.only.com' , 
    'http://change.allowed.com' , 
] 

CSRF_TRUSTED_ORIGINS  =  [ 
    'change.allowed.com' , 
]