ローカルの React フロントエンドと Node.JS サーバー間の接続をテストする

Question

API を使用してフロントエンドに JSON を送信するジョブを実行する、node.JS Express サーバーを作成しました。バックエンドを完成させ、AWS サーバーに配置しました。今は React フロントエンドに取り組みたいと思っています。 localhost:3000 で反応を開始し、AWS サーバーにリクエストを送信しますが、localhost:3000 にはそのサーバーにリクエストを送信する権限がないことを示す CORS エラーが表示されます。

ソース「http://localhost:3000」から「http://www.myawssever.fr:4000/api-url/」へのアクセスが CORS ポリシーによってブロックされました: 「アクセス制御」なし - 「Allow-Origin」ヘッダーが要求されたリソースに存在します。不透明な応答がニーズを満たす場合は、リクエスト モードを「no-cors」に設定して、CORS が無効になっているリソースを取得します。

localhost:3000 を認証するために複数の解決策を試しましたが、サーバーにとって localhost:3000 はアドレスそのものなので、問題はそこにあるとは思えません。 サーバー (AWS) にリクエストを送信して、コンピューター (localhost:3000 での反応) からバックテストを行う方法をご存知ですか?

Answer 1

CORS エラーを解決し、React フロントエンドと AWS サーバー間の通信を可能にするための複合手順を次に示します。

AWS サーバーでの CORS の構成

まず、適切な CORS ヘッダー を 応答 に含めるようにサーバーを構成する必要があります。 React アプリケーションからのリクエストを許可するには、値 "http://localhost:3000" を持つ "Access-Control-Allow-Origin" ヘッダーを追加する必要があります。

CORS を構成するための具体的な方法

CORS を構成する正確な方法は、使用しているサーバー テクノロジ (Express、Apache、Nginx など) によって異なります。たとえば、Express を使用する場合は、cors ミドルウェアを使用できます。 Express を使用して CORS を構成する方法の例を次に示します:

リーリー

AWS サーバーを再起動します

CORS を構成した後、AWS サーバーを再起動して変更を適用します。