React UI に FastAPI バックエンドからの POST 応答が表示されないのはなぜですか?

React UI に FastAPI バックエンドからの POST 応答が表示されない

このシナリオでは、React UI は FastAPI から JSON ファイルをフェッチすることが期待されますバックエンドを "localhost:8000/todo" に配置し、UI の一部としてデータを次の場所に表示します。 「ローカルホスト:3000」ただし、JSON ファイルの 2 つの項目 (「本を読む」と「街を自転車で回る」) が表示されません。

問題の根本原因:

問題は、FastAPI バックエンドに Cross-Origin Resource Sharing (CORS) 構成が欠如していることにあります。 CORS は、あるオリジンのリソースを別のオリジンのリソースと共有できるようにするメカニズムです。この場合、React UI と FastAPI バックエンドが異なるドメインで実行されているため、これが必要です。

解決策:

FastAPI バックエンドで CORS を有効にするには、CORSMiddleware を構成する必要があります。このミドルウェアを使用すると、バックエンドへのアクセスを許可するオリジン、許可するメソッドとヘッダー、資格情報を許可するかどうかを指定できます。

実装例:

この例では、CORSMiddleware は、「http://localhost:3000」と「http://localhost:3000」の 2 つのオリジンからのリクエストを許可するように構成されています。 「http://127.0.0.1:3000」さらに、すべてのメソッドとヘッダーが許可され、認証情報の共有が可能になります。

注:

オリジンとはプロトコル、ドメイン、ポートの組み合わせを指すことに留意することが重要です。 。したがって、ポートが異なるローカルホスト URL であっても、異なるオリジンとみなされ、CORS 構成が必要となります。

以上がReact UI に FastAPI バックエンドからの POST 応答が表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。