Reactでプロキシを有効にする2つの実用的な方法

プロキシを有効にする2つの方法

React には、直接使用できるカプセル化された Ajax リクエスト コードがありません。対話する場合、Ajax コードを自分でカプセル化するか、サードパーティの Ajax ライブラリを使用する必要があります。通常は、axios (軽量) を使用します。

なぜエージェントが必要なのでしょうか?

例えば、ローカルにポート 5000 のサーバーを書いているときに、ポート 3000 経由でリクエストを行うと、クロスドメインの問題 (ポート 3000 の本来の ajax エンジンがレスポンスを傍受する) が発生します。このとき、プロキシを使用することで問題を解決できます。プロキシとは、情報を送信するためのツールです。ポート 3000 のリクエストは、ポート 3000 で開かれたプロキシに送信され、プロキシはそれをポート 5000 のサーバーに転送します。応答の際、プロキシには Ajax エンジンがないため、応答を受信して​​からポート 3000 で開かれたスキャフォールディングに渡すことができ、クロスドメインの問題を解決できます。

Reactでプロキシを開く2つの方法

方法1

package.json ファイルに "proxy": "https://localhost:5000" を追加します。その後、ポート 3000 で利用できないリソースがポート 5000 で見つかるようになります。つまり、ポート 3000 に送信された要求はポート 5000 上のサーバーに転送されますが、要求されたオブジェクトがすでにポート 3000 で利用可能な場合は、ポート 5000 に転送されません。

この方法では 1 つしか見つかりませんが、ポート 5000 だけでなく他のポート番号も見つけたい場合 (複数のプロキシを構成する場合) は、次の方法を使用する必要があります。

方法2

srcにsetupProxyファイルを追加し（React scaffoldingがこのファイルを見つけます）、次のコードをコピーします。

設定後、リクエストが以前に送信されたアドレス localhost:3000 に /api1 を追加する必要があります。これは、要求されたリソースがポート 3000 で見つからない場合、api1 によって設定されたプロキシがポート 5000 へのアクセスに使用されることを意味します。複数のプロキシを設定する場合は、カンマで区切ります。

changeOrigin は、サーバーが受信する応答ヘッダー内の Host フィールドの値を制御するために使用されます。ここで、デフォルト値が false の場合、サーバーはリクエストがポート 3000 から送信されたと認識しますが、値が true に設定されている場合、サーバーはリクエストがポート 5000 から送信されたと認識します (実際はそうではありません)。これを書く必要はありませんが、書いたほうがよいでしょう。

リクエスト パスは、pathWrite 中に書き換えられます。実際には、プロキシは最初は /api を通じて見つかりますが、プロキシがポート 5000 にリクエストを行う場合は、https://localhost:3000/api/student のように /api を削除する必要があります。api を削除しないと、リクエスト アドレスは /api/students と同等になりますが、実際にリクエストするアドレスは /student である必要があります。

const proxy = require('http-proxy-middleware');
​
module.exports = 関数 (アプリ) {
    アプリを使用する(
        プロキシ('/api1', {
            ターゲット: 'http://localhost:5000',
              changeOrigin: true, // デフォルト値は false
            パス書き換え: { '^/api1': '' }
         }）、
        プロキシ('/api2', {
            ターゲット: 'http://localhost:5001',
            changeOrigin: true, // デフォルト値は false
            パス書き換え: { '^/api2': '' }
       }）、
   ）
}

要約する

これで、React でプロキシを有効にする 2 つの方法についての記事は終了です。React でプロキシを有効にする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。