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 での反応) からバックテストを行う方法をご存知ですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 サーバーを再起動して変更を適用します。