FastAPIで初めて遭遇したCORSエラー

FastAPIでの初めてのCORSエラー

私は作りながら学びます。 支出管理アプリを作りました。 バックエンドにはFastAPIを使用しました。 フロントエンドにはHTMLとJavaScriptを使用しました。

サーバーは起動しました。 Swagger UIは動作しました。 HTMLページは失敗しました。 「Load Expenses」ボタンは何も反応しませんでした。

Pythonコードを確認しました。 fetchリクエストを確認しました。 何も間違っているようには見えませんでした。

ブラウザのコンソールを開きました。 赤いエラーが表示されていました。 CORSによってリクエストがブロックされていました。

フロントエンドはポート3000を使用していました。 バックエンドはポート8000を使用していました。 ブラウザはこれらを異なるオリジンと見なしました。 そのため、接続がブロックされました。

FastAPIのコードにCORSMiddlewareを追加しました。 オリジンとして http://127.0.0.1:3000 を許可しました。 エラーは消えました。

皆さんへの教訓：

• まずはブラウザのコンソールを開きましょう。
• APIは単体でテストしましょう。
• CORSエラーはブラウザで発生するものです。コードのバグではありません。

出典: https://dev.to/bynilotpal/my-first-cors-error-in-fastapi-2hf6