プロキシを有効にする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 操作例を展開します
この記事では、JavaScript メッセージ ボードでメッセージを追加および削除する小さな例を詳細...
目次コードを見せてください効果をテストする効果追伸別のアプローチコードを見せてください HTMLEl...
以前、Amap API を非同期にロードする方法を紹介しました。今回は、vue-amap の使用方法...
まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...
目次1. React.FC<> 2. クラスxxはReact.Componentを拡張し...
最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...
Fabric.js は非常に便利なキャンバス操作プラグインです。ここでは、日常のプロジェクトで使用さ...
MySQL は、ネットワーク経由だけでなく、名前付きパイプ経由でも接続できます。MySQL への接続...
Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...
訪問するたびにブラウザにCookieが生成されますが、 Cookieの存在はユーザーにとって良いこと...
今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...
非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...
Ubuntu 18.04の場合1. sudo apt install python 。コマンドライン...
目次vue2の場合vue3ではセットアップに関する注意事項セットアップライフサイクルは、before...
ブログを書くのは初めてです。開発に携わって2年になります。仕事の後に何か有意義なことを見つけたいと思...