Django로 웹 개발을 하다 보면, 프론트엔드(React나 Vue.js 같은)랑 백엔드(Django)가 서로 다른 도메인에서 돌아가는 경우가 많잖아요? 그럴 때 마주치는 골칫덩어리가 바로 CORS 문제입니다. 저도 처음엔 엄청 헤맸는데, django-cors-headers라는 멋진 패키지를 알게 된 후로는 한결 수월해졌어요. 하지만 이게 은근히 보안에 민감한 부분이라, 제대로 설정하지 않으면 큰일 날 수 있다는 걸 깨달았죠. 오늘은 제가 겪었던 경험과 함께, 안전하게 CORS 설정하는 방법을 알려드릴게요!
먼저 CORS가 뭔지 간단히 설명해 드릴게요. CORS는 "Cross-Origin Resource Sharing"의 약자로, 쉽게 말해 브라우저가 다른 도메인의 자원(예를 들어, Django 서버에서 제공하는 API)에 접근하려 할 때 발생하는 보안 제약입니다. 브라우저는 보안상 같은 도메인에서만 자원을 가져오도록 되어있거든요. 그래서 다른 도메인에서 API를 호출하려면, Django 서버가 특별한 허락(CORS 헤더)을 보내줘야 합니다. django-cors-headers는 이 허락을 자동으로 보내주는 역할을 하는 든든한 조력자 같은 존재죠.
핵심은 세 가지입니다. 첫째, Origin: API를 요청하는 도메인(프론트엔드)이죠. 둘째, CORS 헤더: Django 서버가 Origin에 접근을 허용할지 말지를 알려주는 신호 같은 겁니다. Access-Control-Allow-Origin 이라는 헤더가 가장 중요하고, Access-Control-Allow-Methods (어떤 HTTP 메서드를 허용할지, 예: GET, POST 등), Access-Control-Allow-Headers (어떤 헤더를 허용할지) 같은 것도 있어요. 마지막으로 Pre-flight request: 실제 요청 전에 서버가 허용하는 메서드와 헤더를 미리 확인하는 요청이에요. OPTIONS 메서드를 사용합니다. 이해가 되셨나요? 조금 어렵죠? 하지만 실제로 설정하는 건 생각보다 간단해요.
자, 이제 실제로 설정하는 방법을 보여드릴게요. 저는 처음에 설치하는 것부터 막혔었는데, 이건 의외로 간단합니다. 터미널에서 pip install django-cors-headers 라고 입력하면 끝!
다음은 settings.py 파일을 수정하는 부분입니다. 여기서 잠깐! settings.py 파일이 어딘지 모르시겠다면, Django 프로젝트의 최상위 디렉토리에서 찾아보세요. 없으면 큰일이에요! (농담입니다. 새로 만들면 됩니다.)
먼저 INSTALLED_APPS에 'corsheaders'를 추가해야 합니다. 그리고 이게 중요한데, MIDDLEWARE 설정에서 corsheaders.middleware.CorsMiddleware를 django.middleware.common.CommonMiddleware 앞에 넣어줘야 해요. 순서가 바뀌면 제대로 작동하지 않으니 꼭 기억해두세요!
그리고 가장 중요한 CORS_ALLOW_ORIGIN_WHITELIST 설정입니다. 여기서 허용할 도메인들을 명시적으로 적어줘야 해요. 개발 환경(localhost)에서는 여러 포트를 허용하는 게 편리하겠죠? 예를 들어, CORS_ALLOW_ORIGIN_WHITELIST = ["http://localhost:3000", "http://127.0.0.1:3000", "http://localhost:8000"] 이렇게요. 하지만 운영 환경에서는 절대 CORS_ALLOW_ALL_ORIGINS = True를 쓰면 안 됩니다! 보안에 치명적인 문제가 생길 수 있어요. 반드시 특정 도메인만 허용하도록 CORS_ALLOW_ORIGIN_WHITELIST를 설정해야 합니다. 예를 들어, CORS_ALLOW_ORIGIN_WHITELIST = ["https://www.example.com"] 이런 식으로요. www.example.com을 여러분의 도메인으로 바꿔주세요!
필요에 따라 CORS_ALLOW_METHODS (허용할 HTTP 메서드)와 CORS_ALLOW_HEADERS (허용할 헤더)도 설정할 수 있습니다. 이 부분은 기본 설정값을 사용해도 괜찮지만, 필요한 헤더가 있다면 추가해주세요. 예를 들어, 인증 관련 헤더(authorization)가 필요할 수도 있겠죠.
CORS_ALLOW_CREDENTIALS = True 설정은 쿠키를 포함해서 요청을 보낼 수 있도록 허용하는 옵션입니다. 개발 환경에서 편의성을 위해 사용할 수 있지만, 운영 환경에서는 신중하게 사용해야 합니다. 그리고 중요한 점! CORS_ALLOW_CREDENTIALS = True를 사용하면 CORS_ALLOW_ORIGIN에는 단 하나의 Origin만 설정해야 합니다. 와일드카드(*)는 절대 사용하면 안 돼요!
마지막으로, 정적 파일(CSS, JavaScript, 이미지)은 CORS 설정과는 별개로 처리됩니다. 정적 파일을 제공하는 서버의 설정을 확인해야 합니다.
자, 이제 CORS 설정이 끝났습니다! 하지만 설정 후에는 반드시 테스트를 해봐야 합니다. 제대로 설정되지 않았다면 브라우저 콘솔에서 CORS 에러 메시지를 볼 수 있을 거예요. 그럼 다시 설정을 확인해보세요. 특히 운영 환경에서는 보안 전문가와 상의해서 설정하는 것을 추천합니다. 보안은 항상 최우선이니까요! 어려워 보이지만, 한번 해보면 의외로 쉽다는 것을 알게 될 거예요. 화이팅!
댓글
댓글 쓰기