React クロスドメイン リクエスト ソリューション: フロントエンド アプリケーションでのクロスドメイン アクセスの問題に対処する方法

React クロスドメイン リクエスト ソリューション: フロントエンド アプリケーションでのクロスドメイン アクセスの問題に対処する方法。具体的なコード例が必要です。

フロントエンド開発において、クロスドメインリクエストのリクエストされた質問に遭遇することがよくあります。クロスドメイン要求とは、フロントエンド アプリケーションによって送信される HTTP 要求のターゲット アドレス (ドメイン名、ポート、プロトコル) が現在のページのアドレスと一致しないことを意味します。ブラウザーの同一オリジン ポリシーにより、クロスドメイン リクエストは制限されています。ただし、実際の開発では、さまざまなサーバーと通信する必要があることが多いため、クロスドメイン要求に対するソリューションが特に重要です。

この記事では、React クロスドメイン リクエストのソリューションを紹介し、具体的なコード例を示します。

1. JSONP

JSONP は、クロスドメイン リクエストのソリューションです。<script></script> タグにはクロスドメインの制限がないという事実を利用します。 。具体的な実装手順は次のとおりです。

1. フロントエンド アプリケーションで、<script></script> タグを追加し、その の値としてサーバー URL を使用します。 src 属性。
2. サーバー側では、リクエストを処理して関数呼び出しを返します。この関数呼び出しはコールバック関数として機能し、データをパラメーターの形式でフロントエンド アプリケーションに渡します。
3. フロントエンド アプリケーションは <script></script> タグを読み込んだ後、サーバーから返されたデータを取得できます。

次はサンプル コードです:

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  window[callback] = function(data) {
    delete window[callback];
    document.body.removeChild(script);
    callback(data);
  };
  document.body.appendChild(script);
}

function fetchUserData() {
  jsonp('http://api.example.com/user', 'handleUserData');
}

function handleUserData(data) {
  // 处理从服务端返回的数据
}

fetchUserData();

2. CORS

CORS (Cross-Origin Resource Sharing) は、ブラウザによって提供されるクロスドメイン リクエストです。 HTTP リクエスト ヘッダーに特定のフィールドを追加することで、クロスドメイン リクエストの権限制御を実装するソリューション。以下は、CORS を使用してクロスドメイン要求を行うためのサンプル コードです。

fetch('http://api.example.com/user', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*' // 设置允许跨域的域名
  },
})
.then(response => response.json())
.then(data => {
  // 处理从服务端返回的数据
})
.catch(error => {
  console.error(error);
});

サーバー側では、応答の Access-Control-Allow-Origin フィールドを設定する必要があります。ヘッダーを使用して、クロスドメイン アクセスが許可されるドメイン名を指定します。すべてのドメイン名に対してクロスドメイン アクセスが許可されている場合は、このフィールドの値を #* に設定できます。

3. リバース プロキシを使用する

クロスドメイン リクエストの問題を解決するもう 1 つの一般的な方法は、リバース プロキシを使用することです。具体的な手順は次のとおりです。

1. プロキシ サーバーをローカルで開き、ターゲット サーバーのリクエストをプロキシ サーバーに転送します。
2. プロキシ サーバーは、ターゲット サーバーにリクエストを送信し、フロントエンド アプリケーションに応答を返します。

このようにして、フロントエンド アプリケーションによって送信されたリクエストは、ブラウザーの同一オリジン ポリシーをバイパスし、クロスドメイン リクエストを実装できます。

以下は、リバース プロキシを使用したサンプル コードです:

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();

app.use('/api', proxy({ target: 'http://api.example.com', changeOrigin: true }));

app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});

上記のコードを通じて、/api で始まるリクエストを http:/ に転送します。 /api.example.com。

概要:

この記事では、React クロスドメイン リクエストに対する 3 つのソリューション (JSONP、CORS、およびリバース プロキシの使用) を紹介します。実際の開発では、特定のアプリケーション シナリオと要件に応じて、クロスドメイン リクエストを処理する適切なソリューションを選択できます。この記事の内容が React のクロスドメインリクエストの問題解決に役立つことを願っています。

以上がReact クロスドメイン リクエスト ソリューション: フロントエンド アプリケーションでのクロスドメイン アクセスの問題に対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。