如何使用 express 配合代理转发请求
实现一个 express 接口
const express = require("express");
const app = express();
app.use("/abc/11", (req, res) => {
res.json(11);
});
app.listen(9007);
现在我们来通过类似 postman 的工具测试一下这个接口：
> http -b :9007/abc/11
11
可以看到服务器正常返回了 11 这个响应内容。
实现一个反向代理.
题外话：什么是正向代理反向代理？
解：直接连代理服务就是正向代理，否则就是反向代理。
ps: 这可能是最精简的解释了。
const express = require("express");
const proxy = require("http-proxy-middleware").createProxyMiddleware;
const app = express();
app.use("/", proxy(`http://www.httpbin.org`));
app.listen(9007);
再来请求一下，看到其实是连接了一个我们根本就没有写的接口。它是 http://www.httpbin.org/ip 返回的内容。
> http -b :9007/ip
{
"origin": "88.76.56.14"
}
如何实现某些不代理
假设我需要也能代理，也需要 http://127.0.0.1:9007/abc/11 能返回自己的内容。
const express = require("express");
const proxy = require("http-proxy-middleware").createProxyMiddleware;
const app = express();
app.use("/", proxy(`http://www.httpbin.org`));
app.use("/abc/11", (req, res) => {
res.json(11);
});
app.listen(9007);
> http -b :9007/abc/11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<title>404 Not Found</title>
<h1>Not Found</h1>
<p>The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.</p>
*/
请求 /abc/11 得到了一个 404 Not Found 这是为什么？
这说明请求并没有走我们自己写的接口，还是被转发了。但转发的目标服务器上并没有这个接口，所以报 404 了。
为了更清晰一点的表示，我们重新写段代码：
const express = require("express");
const proxy = require("http-proxy-middleware").createProxyMiddleware;
const app = express();
app.use("/", proxy(`/abc`, { target: `http://www.httpbin.org/anything/` }));
app.use("/abc/11", (req, res) => {
res.json(11);
});
app.listen(9007);
> http -b :9007/abc
{
"origin": "88.76.56.14",
}
> http -b :9007/abc/11
{
"origin": "88.76.56.14",
}
*/
可以看到，其实都去了 /anything/。
不妨翻阅官网文档看看
wildcard path matching
For fine-grained control you can use wildcard matching. Glob pattern matching is done by micromatch. Visit micromatch or glob for more globbing examples.
createProxyMiddleware('**', {...})matches any path, all requests will be proxied.createProxyMiddleware('**/*.html', {...})matches any path which ends with.htmlcreateProxyMiddleware('/*.html', {...})matches paths directly under path-absolutecreateProxyMiddleware('/api/**/*.html', {...})matches requests ending with.htmlin the path of/apicreateProxyMiddleware(['/api/**', '/ajax/**'], {...})combine multiple patternscreateProxyMiddleware(['/api/**', '!**/bad.json'], {...})exclusion
可以发现使用 ! 前缀进行排除，并且路径支持数组形式。
尝试一下：
const express = require("express");
const proxy = require("http-proxy-middleware").createProxyMiddleware;
const app = express();
app.use(
"/",
proxy([`/abc`, `!/abc/11`], { target: `http://www.httpbin.org/anything/` })
);
app.use("/abc/11", (req, res) => {
res.json(11);
});
app.listen(9007);
果然，试试就差点逝世。
[HPM] Proxy created: /abc,!/abc/11 -> http://www.httpbin.org/anything/
(node:13660) UnhandledPromiseRejectionWarning: Error: [HPM] Invalid context. Expecting something like: ["/api", "/ajax"] or ["/api/**", "!**.html"]
着重看了一下它的错误，发现第一个 /api 和第二个 /api/** 有些特别。
然后我也不知道是啥意思。
那就继续试试：
const express = require("express");
const proxy = require("http-proxy-middleware").createProxyMiddleware;
const app = express();
app.use(
"/",
proxy([`/abc/**`, `!/abc/11`], { target: `http://www.httpbin.org/anything/` })
);
app.use("/abc/11", (req, res) => {
res.json(11);
});
app.listen(9007);
> http -b :9007/abc
{
"origin": "88.76.56.14",
}
> http -b :9007/abc/11
11
> http -b :9007/abc/12
{
"origin": "88.76.56.14",
}
嗯看起来现在没毛病了，除了 /abc/11 返回了我们自己的内容，其他都是服务器返回的内容。
留一个习题
上面的代码我们设置了 pathRewrite 参数为 host，以及另一个 pathRewrite 参数。
const express = require('express')
const proxy = require('http-proxy-middleware').createProxyMiddleware
const app = express()
app.use('/', proxy(
[`/abc/**`, `!/abc/11`],
{
target: "http://www.httpbin.org",
pathRewrite: {
"^/abc": "http://www.httpbin.org/anything/",
},
},
));
app.use('/abc/11', (req, res) => {
res.json(11)
});
app.listen(9007);
发送以下请求，结果是什么样的呢？
> http -b :9007/abc
???
> http -b :9007/abc/11
???
> http -b :9007/abc/12
???
参考答案：
> http -b :9007/abc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<title>404 Not Found</title>
<h1>Not Found</h1>
<p>The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.</p>
> http -b :9007/abc/11
11
> http -b :9007/abc/12
{
"origin": "88.76.56.14",
}
提示:
有没有想起 webpack devServer 中的 proxy?