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
にする
この事によりアクセス許可を送ることができ正常にデータを送信することができる。