在前端开发中，我们经常需要使用代理来解决跨域问题。在 Node.js 中，我们可以使用 http-proxy-middleware 包来实现代理，但是在 TypeScript 中，我们需要使用 @types/http-proxy-middleware 来提供类型声明。本篇文章将介绍如何使用 @types/http-proxy-middleware 包以及常见的使用示例。
安装 @types/http-proxy-middleware
首先，我们需要安装 @types/http-proxy-middleware 包。打开终端或命令行窗口，并输入以下命令：
npm install @types/http-proxy-middleware --save-dev
基本使用
使用 http-proxy-middleware 必须引入模块：
import { createProxyMiddleware } from 'http-proxy-middleware';然后，我们可以使用 createProxyMiddleware 函数来创建代理，并将其传递给中间件处理程序。以下是一个基本的示例：
-- -------------------- ---- ------- ------ - --------------------- - ---- ------------------------ ------ - -- ------- ---- ---------- ----- --- - ---------- ----- ----- - ----------------------- ------- ------------------------- ------------- ----- --- --------------- ------- ---------------- -- -- - ---------------- --------- -- ---- -------- ---
在这个示例中，我们使用 http-proxy-middleware 包来创建一个代理中间件。使用 target 属性指定我们要代理的 URL，并设置 changeOrigin 选项来更改主机头以匹配目标 URL。
我们还将代理中间件添加到 Express 应用程序的路由中，以便所有 /api 路径请求都会被发送到配置的代理目标。
高级选项
除了基本的选项外，http-proxy-middleware 还提供了其他高级选项，例如：
pathRewrite
pathRewrite 选项允许我们通过修改路径来重写请求 URL。注意：pathRewrite 选项只能用于更改路径，不能用于更改主机、协议或端口。
const proxy = createProxyMiddleware({
target: 'http://www.example.com',
pathRewrite: {
'^/api': '/',
},
});在这个示例中，我们使用 pathRewrite 选项将 /api 重写为 /。这意味着当前应用程序路径的所有 /api 请求都将被重写为 /，然后代理将请求发送到目标 URL。
onProxyReq
onProxyReq 选项允许我们在发送请求之前修改请求的选项。例如，我们可以添加自定义 header 或在请求体中添加数据。
const proxy = createProxyMiddleware({
target: 'http://www.example.com',
onProxyReq: (proxyReq, req, res) => {
proxyReq.setHeader('Authorization', 'Bearer my-access-token');
},
});在这个示例中，我们使用 onProxyReq 选项添加一个名为 Authorization 的 header，并设置其值为 Bearer my-access-token。这个 header 将在请求发送到目标 URL 之前添加到所有请求中。
onError
onError 选项允许我们在发生代理错误时自定义错误处理程序。
const proxy = createProxyMiddleware({
target: 'http://www.example.com',
onError: (err, req, res) => {
res.status(500).send('Proxy error');
},
});在这个示例中，我们使用 onError 选项自定义错误处理程序。如果代理请求时发生错误，将发送一个包含 Proxy error 的 500 响应。
结论
使用 @types/http-proxy-middleware 包可以让我们以类型安全的方式使用 http-proxy-middleware，从而在编码时更加轻松和可靠。本文介绍了 http-proxy-middleware 的基本用法和高级选项，并提供了示例代码供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155375