DRF(Django Rest Framework) - Vue.js 연동 시 CORS 이슈

Access to XMLHttpRequest at 'http://localhost:8000/api/v1/app_name' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

 

DRF 과정에서 만든 api 서버에 AJAX 요청을 보내면 보안 상의 이유(CORS policy)로 리소스를 반환해주지 않는다.

따라서 다음과 같은 설정이 필요하다.

 

django-cors-headers

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

$ pip install django-cors-headers

# settings.py
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]
MIDDLEWARE = [
    # 맨 위에 넣기
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True​

 

이렇게 설정했는데도 여전히 같은 에러 메세지가 나온다면,

AJAX 요청을 보내는 URL에 슬래시(/)가 빠져있지 않은지 확인하자.

 

 

아마 될걸? 🙄