ホームページ >ウェブフロントエンド >フロントエンドQ&A >Node.js のルーティング コンポーネントを使用してプロキシを構成する方法
フロントエンド開発の発展に伴い、API インターフェイスを介してバックエンド サーバーと通信する必要があるアプリケーションがますます増えています。しかし、開発者が直面する問題の 1 つは、クロスオリジン制限 (クロスサイト攻撃を防ぐためにセキュリティ上の理由からブラウザによって導入されたメカニズム) をバイパスする方法です。
プロキシは、クロスオリジン制限を解決する一般的な方法です。ブラウザのリクエストをプロキシ サーバーに送信し、プロキシ サーバーがそのリクエストを実際のインターフェイス アドレスに転送することにより、クロスオリジン制限をバイパスしてインターフェイスにアクセスできます。この記事では、Node.js のルーティング コンポーネントを使用してプロキシを構成する方法について説明します。
Node.js には、プロキシを構成するための複数のオプションがあります。 Express を例に挙げると、一般的に使用されるソリューションには次のものが含まれます。
この記事では、最初の解決策を紹介します。
プロキシ機能を実装するには、http-proxy-middleware プラグインをインストールする必要があります。
$ npm install http-proxy-middleware --save-dev
Express では、express.Router() メソッドを使用してルーティング インスタンスを作成できます。ルーティング インスタンスごとにプロキシを構成できます。
const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); const router = express.Router(); // 配置代理 router.use('/api', createProxyMiddleware({ target: 'http://www.example.com', changeOrigin: true })); app.use(router); // 启动服务器 const server = app.listen(3000, () => { const { address, port } = server.address(); console.log(`Listening on http://${address}:${port}`); });
上記のコードは、ルートを構成することによって、ルーティング アドレス /api を持つリクエストを http://www.example.com アドレスにプロキシします。
createProxyMiddleware では、複数のオプションを構成してプロキシ構成をカスタマイズできます。たとえば、pathRewrite オプションを使用して、実際のインターフェイス アドレスと一致するようにルーティング アドレスの /api プレフィックスを削除するパスを書き換えることができます:
router.use('/api', createProxyMiddleware({ target: 'http://www.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } }));
上記のコードは、将来のパスで / をプロキシします。プレフィックスが削除されます。
プロキシの構成に加えて、インターセプターを構成してプロキシの動作をカスタマイズすることもできます。インターセプターはリクエストとレスポンスの処理に使用されます。たとえば、リクエストが開始される前にヘッダー情報を追加したり、リクエストの応答後に戻り値を処理したりできます。
http-proxy-middleware では、onProxyReq と onProxyRes の 2 つのオプションを使用してインターセプターを構成できます。
// router.use('/api', createProxyMiddleware({ target: 'http://www.example.com', changeOrigin: true, onProxyReq: (proxyReq, req, res) => { // 在请求发起前添加头部信息 proxyReq.setHeader('Authorization', 'Bearer ' + token); }, onProxyRes: (proxyRes, req, res) => { // 在响应返回后处理返回值 const data = proxyRes.body.toString('utf8'); const newData = JSON.parse(data).result; res.send(newData); } }));
上記のコードでは、onProxyReqにAuthorizationというヘッダー情報を追加し、onProxyResで戻り値を処理しています。
上記の紹介を通じて、http-proxy-middleware プラグインを使用してルーティング プロキシ機能を実装する方法を学びました。また、それを次のように実装する方法も学びました。ミドルウェア。さらに、リクエストとレスポンスを処理するためにインターセプターを構成する方法も学びました。
Node.js は、プロキシ機能の実装に役立つ便利なツールを多数提供し、開発者がアプリケーションを迅速に構築してデプロイできるようにします。この記事が、プロキシを使用してバックエンド開発作業におけるクロスサイト通信の問題を解決するのに役立つことを願っています。
以上がNode.js のルーティング コンポーネントを使用してプロキシを構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。