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

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 をよろしくお願いいたします。

<<:  CentOS 6 は Docker を使用して Zookeeper 操作例を展開します

>>:  MySql クイック挿入数千万の大規模データの例

推薦する

メッセージボードにメッセージを追加および削除するための JavaScript

この記事では、JavaScript メッセージ ボードでメッセージを追加および削除する小さな例を詳細...

JSはjQueryのappend関数を実装します

目次コードを見せてください効果をテストする効果追伸別のアプローチコードを見せてください HTMLEl...

vue-amap のインストールと使用手順

以前、Amap API を非同期にロードする方法を紹介しました。今回は、vue-amap の使用方法...

Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...

React.FCとReact.Componentの使用に関する簡単な説明

目次1. React.FC<> 2. クラスxxはReact.Componentを拡張し...

MySQL 8.0.23 無料インストールバージョンの設定詳細チュートリアル

最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...

キャンバス操作プラグイン fabric.js の使い方を詳しく解説

Fabric.js は非常に便利なキャンバス操作プラグインです。ここでは、日常のプロジェクトで使用さ...

MySQL thread_stack 接続スレッドの最適化

MySQL は、ネットワーク経由だけでなく、名前付きパイプ経由でも接続できます。MySQL への接続...

Linuxがすべてのコマンドをサポートしていない問題の解決策

Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...

nginx クッキーの有効期間に関する議論の要約

訪問するたびにブラウザにCookieが生成されますが、 Cookieの存在はユーザーにとって良いこと...

Win10 の Linux サブシステムを有効にする方法を説明します (詳細な画像とテキスト付き)

今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...

Ubuntu 16.04/18.04 に Pycharm と Ipython をインストールするチュートリアル

Ubuntu 18.04の場合1. sudo apt install python 。コマンドライン...

vue3で注意すべき2つのポイントを詳しく解説:セットアップ

目次vue2の場合vue3ではセットアップに関する注意事項セットアップライフサイクルは、before...

Linux での MySQL のアンインストールとインストールのグラフィック チュートリアル

ブログを書くのは初めてです。開発に携わって2年になります。仕事の後に何か有意義なことを見つけたいと思...