Django REST Frameworkで作成したAPI エンドポイントを使用した際のCORSポリシーによるブロックが、CORS設定してもなぜ発生するか

Question

実現したいこと

Django REST Frameworkで作成したAPIエンドポイントをReact + Typescriptで作られたアプリで使用したい。

前提

Django REST Frameworkで以前にAPIエンドポイントを作成しました。
ブラウザでAPIを表示して確認できたので、APIの作成はできていると思っています。

そのAPIを使用しようと、GithubにReact + Typescriptで作成したアプリをアップロードし、デプロイ環境であるNetlifyとVercelにデプロイしました。

発生している問題・エラーメッセージ

React + Typescriptアプリのブラウザの開発ツールでエラーメッセージを見たところ、CORSポリシーによりブロックされていますと表示されました。

該当のソースコード

pip install django-cors-headers

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)


MIDDLEWARE = [
    ...,
    'corsheaders.middleware.CorsMiddleware',
    ...,
]


CORS_ALLOWED_ORIGINS = [
    'React + TypescriptアプリのURL',
]

 useEffect(() => {
      fetch("APIエンドポイントのURL")
}

試したこと

ブラウザ開発ツールのエラーメッセージからDjango REST FrameworkのCORS設定の修正が必要だと考えました。調べたところ、設定は上記のみであると思われたためURL等の誤字を確認しましたが、ミスはありませんでした。

Pythonanywhereのサポートチームに問い合わせましたが、上記の設定に関する説明のみでその他の設定はないとのことでした。

試しに、Django REST Frameworkで作成したプロジェクト内に、同プロジェクトで作成した本APIエンドポイントを使用するアプリを作成してPythonanywhereでデプロイしました。
こちらはブラウザがアクセスし続けるだけでPythonanywhereの設定である5分後にタイムアウトしました。アクセスはできていないため、ブラウザのエラーメッセージは確認できませんでした。同プロジェクト内のAPIを使用するアプリはあまり作られないと思っています。

補足情報（FW/ツールのバージョンなど）

DjangoはPythonanywhereでデプロイしています。Python3です。

自分の予想ですが、NetlifyとVercelはフリーアカウントを使っています。
そのため、URLの最後がnetlify.appとvercel.appです。
これらはあまり一般的でないため、Django側が認識できていないのではないかと少し考えています。

Comments

[1T2R3M4]

https://qiita.com/kon-m/questions/31b277c67354b3e7b4f6
以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

'React + TypescriptアプリのURL'ですが、本当にURLを書いたのでしょうか？

CORS_ALLOWED_ORIGINSという名前のとおり、ここに指定すべきものはオリジン（プロトコル、FQDN、ポート番号の組）であり（例：https://teratail.com）、パスまで書いてはいけません。

Comments

[mkon1]

ご回答ありがとうございます。

CORS_ALLOWED_ORIGINSに書いているものは、ブラウザでアプリが表示されるURLを書いています。
例：https://teratail.com/app1　の/app1以降に当たるものは書いていません。

ご回答への正しい返信になっているかわかりませんが、例：https://teratail.comの、.com以降の部分は書いていません。

[maisumakun]

それなら、この問題というわけではなさそうですね。失礼いたしました。

[mkon1]

ご返信ありがとうございます。
React+Typesciptのデプロイ環境であるNetlifyとVercelを今のところ、フリーアカウントで使っています。
そのため、URLの最後がnetlify.appとvercel.appとなっているため、一般的ではない形です。
その辺りが、Djangoが不具合であると認識しているのではないかと予想しています。
ただし、Pythonanywerehのエラーログには何もエラーが表示されていません。
DRF関連の不備は表示されないのかはわかりませんが。
Pythonanywhereのサポートチームにも同じ質問をしています。

日を置いて、CORS_ALLOW_ALL_ORIGINS = Trueを試して全てのリクエストの許可をしてみました。
ですが、React側のブラウザのエラーは変わらずCORSポリシーエラーでした。
また、React側のfetch関数で”no-cors mode”を試してみました。
”no-cors mode”の機能の通り、CORS設定は無視されるためリクエストはDRF API側に届いていますが
データが空で何も受け取れないというエラーでした。これは"no-cors mode"の本来の動作のため問題ない動作でした。
このことから、このCORSポリシーエラーはDjangoからでもReactからでもないと思われます。
元々フロントエンドのReactではCORS設定自体がありません。

API機能等の動作が確認できたら有料版に切り替えてもいいかと考えていますが、動かないうちに切り替えるのもと、検討中です。

大変お忙しい中、ご連絡頂きありがとうございました。
何かしらご存知でしたら、引き続きよろしくお願い致します。

[mkon1]

後日、FlutterでこのDRFで作ったAPIを使ってみました。エミュレーターですが、iphoneとAndroidではAPIのデータが表示されましたが、macOSとChromeではCORSエラーが発生しました。ローカルサーバーのオリジンもDjangoのsettings.pyに記載済みです。
ネイティブアプリはCORS設定と関係がないので、動作に納得です。やはりブラウザなのでオリジンに関わるところのようです。ブラウザ独自のセキュリティが関係しているのかは不明です。

Djangoは普及しているのかわかりませんが、こういうところが使いづらいところなのかなと思います。
Pythonanywhereサポートチームからは、各設定は正しいがCORSエラーがブラウザで表示される理由は不明とのことでした。

改めまして、ご存じの方がおられましたら、解決済みにしていますがご教授頂けましたらと思います。