KT AIVLE School 빅프로젝트 - Django와 React 소통하기

미니프로젝트에서 저희 조를 고생시켰던 Django - Nextjs CORS 설정을 해서 이곳에 공유해 둡니다!

 

Nextjs 설정

axios를 주로 쓰기 때문

에 axios instance를 만들어서 모든 요청에 동일하게 적용하도록 설정했습니다.

import axios from "axios";

// 환경변수 불러오기
const API_DOMAIN = process.env.NEXT_PUBLIC_ENV_API_DOMAIN;
const API_URL = process.env.NEXT_PUBLIC_ENV_API_URL;

// axios 인스턴스 생성
const instance = axios.create({
  baseURL: API_URL, // 도메인 허용
  withCredentials: true, // CORS 허용
  xsrfCookieName: "csrftoken", // Django 설정 확인 필요
  xsrfHeaderName: "X-CSRFToken", // Django 설정 확인 필요
  headers: {
    "Content-Type": "application/json", // json
    "Access-Control-Allow-Origin": API_DOMAIN, // 허용할 도메인 주소
    "Access-Control-Allow-Credentials": "true", // 허용할 도메인에서 쿠키 사용 가능
  },
});

export default instance;

Django 설정

# settings.py 

INSTALLED_APPS = [
	# 기본 설정들
    ...
    # !apps
    ...
    'corsheaders', # cors 설정을 위한 패키지
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
	...
]


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

CORS_ORIGIN_ALLOW_ALL = True # 변경 필요
CORS_ALLOW_CREDENTIALS = True

CSRF_TRUSTED_ORIGINS = (
    'localhost:8000',
    '127.0.0.1:8000',
    'dancify.site'
)

CORS_ORIGIN_WHITELIST = (
    'http://localhost:8000',
    'http://127.0.0.1:8000',
    
    'http://localhost:80',
    'http://127.0.0.1:80',
    
    'http://localhost:3000',
    'http://127.0.0.1:3000',
    
    'http://dancify.site',
    'https://dancify.site'
    
    'http://프론트EC2아이피주소:80',
    'https://프론트EC2아이피주소:443',
    'http://백EC2아이피주소:8000',
)

CORS_ALLOW_HEADERS = (
    'access-control-allow-credentials',
    'access-control-allow-origin',
    'access-control-request-method',
    'access-control-request-headers',
    'accept',
    'accept-encoding',
    'accept-language',
    'authorization',
    'connection',
    'content-type',
    'dnt',
    'credentials',
    'host',
    'origin',
    'user-agent',
    'X-CSRFToken',
    'csrftoken',
    'x-requested-with',
)

ALLOWED_HOSTS = ['127.0.0.1', 'localhost', 'dancify.site', '프론트아이피주소']

CSRF_TRUSTED_ORIGINS = ['http://localhost', 'http://127.0.0.1',
                        'http://dancify.site', 'https://dancify.site', 
                        'http://프론트아이피주소', 'https://프론트아이피주소']