Vue에서 Django API 호출 시, CORS policy 에러

 

Vue3에서 Axios를 통하여 Django Ninja API 연동 중에 CORS policy 메시지와 함께 에러가 발생하였다.
에러 해결은 그리 어렵지 않았다. 나중에 혹시 또 이런 문제가 발생할 수 있으니,
잊어 먹지 않기 위해서 블로그에 글을 써놓고자 한다.

 

■ 에러 해결 방법

1. 정확한 에러 메시지는 아래와 같다. (회색 글씨는 각각 API 주소가 다름에 따라 변할 수 있다.)

  - Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/get?param1=1&param2=1' from origin 'http://localhost:8080' has been blocked by CORS policy:

    No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. API가 있는 Django 프로젝트로 가서 터미널의 Command Prompt(명령 프롬프트) 실행한다.

3. 아래 빨간색 글씨의 명령어를 실행한다. 실행한 후 아래 메시지가 나오면 설치 성공

# django-cors-headers : Cross-Origin Resource Sharing(CORS)에 필요한 서버의 헤더를 조작하기 위한 Django App

(django_project_2) Z:\django_project_2>pip install django-cors-headers

 

Collecting django-cors-headers

  Downloading django_cors_headers-4.2.0-py3-none-any.whl (12 kB)

Requirement already satisfied: Django>=3.2 in c:\users\mjmk\anaconda3\envs\django_project_2\lib\site-packages (from django-cors-headers) (4.2.1)

Requirement already satisfied: asgiref<4,>=3.6.0 in c:\users\mjmk\anaconda3\envs\django_project_2\lib\site-packages (from Django>=3.2->django-cors-headers) (3.6.0)

Requirement already satisfied: tzdata in c:\users\mjmk\anaconda3\envs\django_project_2\lib\site-packages (from Django>=3.2->django-cors-headers) (2023.3)

Requirement already satisfied: backports.zoneinfo in c:\users\mjmk\anaconda3\envs\django_project_2\lib\site-packages (from Django>=3.2->django-cors-headers) (0.2.1)

Requirement already satisfied: sqlparse>=0.3.1 in c:\users\mjmk\anaconda3\envs\django_project_2\lib\site-packages (from Django>=3.2->django-cors-headers) (0.4.4)

Installing collected packages: django-cors-headers

Successfully installed django-cors-headers-4.2.0

 

4. Django 프로젝트에 있는 settings.py에 내용을 추가(빨간색 글씨)하면 에러가 해결된다.

INSTALLED_APPS = [

    .....     # 기존에 있는 내용

    'corsheaders'

]

 

MIDDLEWARE = [

    # MIDDLEWARE는 웹 서버와 Django 애플리케이션 사이에 있는 기능이므로, Cors를 전체적으로 적용시키기 위해서는

    # 반드시 맨 처음 줄에 추가한다.

    'corsheaders.middleware.CorsMiddleware',

    .....     # 기존에 있는 내용

]

 

CORS_ORIGIN_ALLOW_ALL = True    # 모든 호스트 허용

CORS_ALLOW_CREDENTIALS = True    # 쿠기 cross-site HTTP 요청에 포함

 

■ 에러가 나는 이유

1. 웹 애플리케이션에서 다른 도메인, 프로토콜, 또는 포트 번호로 리소스를 요청하는 경우, CORS 문제가 발생할 수 있다.

2. 브라우저는 보안상의 이유로 기본적으로 동일 출처 정책을 따른다. 따라서 다른 출처로 리소스 요청을 보낼 때에는 브라우저에서 CORS를 확인하게 된다.

3. 일부 브라우저에서는 브라우저가 먼저 간단한(GET, POST) 요청을 보내고 서버가 허용하는지 확인하는 "프리플라이트" 요청이 발생한다.

    서버가 이를 올바르게 처리하지 않으면 실제 요청도 거부될 수 있다.

4. 브라우저가 아닌 다른 사용자 에이전트(예: cURL)를 사용하여 다른 출처로 요청을 보낼 때도 CORS 문제가 발생할 수 있다.