节点反向代理基本路由问题

Question

我的 node-reverse-proxy 设置如下：

var options = {
  pathnameOnly: true,
  router: {
    '/myapp': '127.0.0.1:9000',
  }
}
httpProxy.createServer(options).listen(8000);

9000 根目录下的 webapp 有一个 index.html 文件，其中有一个像这样的 stylesheet 链接：

<link rel="stylesheet" href="styles/blue.css">

当我直接点击 localhost:9000 时，会加载 html 并找到 css。然后我通过 localhost:8000/myapp 的反向代理访问它，但是我得到一个 Error 404 因为 localhost:9000/未找到样式/blue.css，因为该文件显然是在 localhost:9000/myapp/styles/blue.css 上提供的。

我的应用程序的 html 当然不知道反向代理，所以我无法在 index.html 中解决这个问题。所以我想我错过了一些关于代理设置的基本知识？？

Answer 1

我不知道您现在是否找到了解决方法，但我遇到了完全相同的问题，并且认为我已经解决了。

当您直接点击目标端点localhost:9000 时，路径将作为/ 发送，即只是根。然后，当它请求 css 等时，它会按预期从根目录解决这些问题。

当您通过代理localhost:8000/myapp 调用时，它会将/myapp 路由到目标，然后将目标服务/ 作为路径传递，此时它的行为与上述完全相同。

这里的问题实际上出在浏览器上。因为路径被指定为/myapp，所以它假定“myapp”是一个文件名。然后，当它请求 css 等时，它会将其剥离回最后一个斜杠并将其用作所有相对 href 的基础，这就是为什么它会要求 /styles/blue.css 而不是 /myapp/styles/blue.css。如果您尝试浏览到 localhost:8000/myapp/ - 注意尾部的斜杠 - 那么它可以工作，因为浏览器现在将 /myapp/ 视为路径的一个组成部分。

显然，您不能规定用户必须添加尾部斜杠。而且你不能轻易地在目标服务中做很多事情，如果只是因为它没有看到任何区别，而且无论如何你不想在每个最终服务中重复相同的解决方案。所以答案似乎是在代理中拦截。

此示例有效，但可能有更强大的实现方式。它会寻找路径的最后一部分可能是目录组件的情况，在这种情况下，请求被重定向以强制浏览器重新发出带有斜杠的请求。它会根据它看起来不像 filename.ext 或已经有斜杠来做出决定：

httpProxy.createServer(function(req, res, proxy) {
    var parsed = url.parse(req.url);
    if(!parsed.pathname.match(/(\w+\.\w+|\/)$/)) {
        parsed.protocol = 'http';
        parsed.host = req.headers.host;
        parsed.pathname += '/';
        res.writeHead(301, {Location: url.format(parsed)});
        res.end();
    } else {
        proxy.proxyRequest(req, res);
    }
}, options);