React クロスドメイン リクエスト ソリューション: フロントエンド アプリケーションでのクロスドメイン アクセスの問題に対処する方法。具体的なコード例が必要です。
フロントエンド開発において、クロスドメインリクエストのリクエストされた質問に遭遇することがよくあります。クロスドメイン要求とは、フロントエンド アプリケーションによって送信される HTTP 要求のターゲット アドレス (ドメイン名、ポート、プロトコル) が現在のページのアドレスと一致しないことを意味します。ブラウザーの同一オリジン ポリシーにより、クロスドメイン リクエストは制限されています。ただし、実際の開発では、さまざまなサーバーと通信する必要があることが多いため、クロスドメイン要求に対するソリューションが特に重要です。
この記事では、React クロスドメイン リクエストのソリューションを紹介し、具体的なコード例を示します。
1. JSONP
JSONP は、クロスドメイン リクエストのソリューションです。<script></script>
タグにはクロスドメインの制限がないという事実を利用します。 。具体的な実装手順は次のとおりです。
<script></script>
タグを追加し、その の値としてサーバー URL を使用します。 src
属性。 <script></script>
タグを読み込んだ後、サーバーから返されたデータを取得できます。 次はサンプル コードです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
2. CORS
CORS (Cross-Origin Resource Sharing) は、ブラウザによって提供されるクロスドメイン リクエストです。 HTTP リクエスト ヘッダーに特定のフィールドを追加することで、クロスドメイン リクエストの権限制御を実装するソリューション。以下は、CORS を使用してクロスドメイン要求を行うためのサンプル コードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
サーバー側では、応答の Access-Control-Allow-Origin
フィールドを設定する必要があります。ヘッダーを使用して、クロスドメイン アクセスが許可されるドメイン名を指定します。すべてのドメイン名に対してクロスドメイン アクセスが許可されている場合は、このフィールドの値を #*
に設定できます。
3. リバース プロキシを使用する
クロスドメイン リクエストの問題を解決するもう 1 つの一般的な方法は、リバース プロキシを使用することです。具体的な手順は次のとおりです。
このようにして、フロントエンド アプリケーションによって送信されたリクエストは、ブラウザーの同一オリジン ポリシーをバイパスし、クロスドメイン リクエストを実装できます。
以下は、リバース プロキシを使用したサンプル コードです:
1 2 3 4 5 6 7 8 9 10 |
|
上記のコードを通じて、/api
で始まるリクエストを http:/ に転送します。 /api.example.com
。
概要:
この記事では、React クロスドメイン リクエストに対する 3 つのソリューション (JSONP、CORS、およびリバース プロキシの使用) を紹介します。実際の開発では、特定のアプリケーション シナリオと要件に応じて、クロスドメイン リクエストを処理する適切なソリューションを選択できます。この記事の内容が React のクロスドメインリクエストの問題解決に役立つことを願っています。
以上がReact クロスドメイン リクエスト ソリューション: フロントエンド アプリケーションでのクロスドメイン アクセスの問題に対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。