1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at
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にする

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?