javascriptのCORSエラーについて　Djangoの解決方法

スマホアプリを開発する際に、バックエンドはOctober CMSや、PythonのFast APIを使って、スマホ側をdartやjavascriptで書く、ということのは結構ある．

スマホの開発は終わったが、その後Webもやっぱり作りたいという要件があったときに、まあ一般的には逆だが、そのときに同じバックエンドを使って、フロントエンドだけReactなどのフロントエンドを開発するだけにしようというのは一般的な発想だと思う。

ただ、実際にやってみると苦労する部分があるので以下の通りまとめる。

React NativeのAxiosからAPIを読んでもCORSエラーにならないがReactのAxiosからだとエラーになる。

エラー内容はこのような感じ。

from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

スマートフォン側のWebkitにはおそらくCORSのチェックが厳しくない。

一方でPCのブラウザはCORSがかなり厳しくチェックされている。

そのため、同じフレームワーク、ライブラリを使っても発生する。

これには、バックエンドのAPI側で対応するしかない。

私はDjangoのAPIサーバをある環境で作っているので検証してみたら、WebからのAPIに応答するためには、以下の設定が必要になった。

DjangoのCORS対策

まずはプラグインのインストール。

pip3 install django-cors-headers

そのご、プラグインの有効化

settings.pyにて、INSTALLED_APPSの箇所で、

“corsheaders”

MIDDLEWAREの箇所で、

“corsheaders.middleware.CorsMiddleware”

“django.middleware.common.CommonMiddleware”

を追記。

更に、CORSのホワイトリストを追記

CORS_ALLOW_HEADERS = [“*”]

CORS_ALLOW_ALL_ORIGINS = True

CORS_ALLOW_CREDENTIALS = True

これでスマホからもアプリからもAPIのアクセスが可能になる。