バックエンド(django)とフロントエンド(vuejs)の間でデータをやり取りするときに発生するCORSエラー


Access to XMLHttpRequest at 'http://localhost:8080' from origin 'http://localhost:8080' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

APIサーバーとWebサーバーをそれぞれ別のポートで立てている場合に生じるエラーである。
このエラーはブラウザーのセキュリティのためのエラーなのでヘッダーに許可を与える必要がある。

今回の場合でいうとvue.js(localhost8080)からDjango(localhost:8000)へAPIリクエストを投げたときに起きるエラーです。

CORSの対策

Djangoに対してCSRF対策を行う。
Githubによると

・python -m pip install django-cors-headers
・INSTALLED_APPSにcorsheadersを追加
・MIDDLEWAREにもレスポンスを追加
CORS_ORIGIN_ALLOW_ALL=Trueにする

この事によりアクセス許可を送ることができ正常にデータを送信することができる。