NGINX + ExpressJS-HTML中URL的反向代理

Question

我有一个运行在端口3000上的NodeJS + ExpressJS应用，该应用具有一条路由：

router.get('/getHello', function(req, res) {
    res.send('Hello, world!');
});

以及在此路线上执行GET的HTML页面

<a href="/getHello">
    <input type="button" value="Visit Helo World page" />
</a>

这个独立的应用程序按预期工作。 它显示Hello, world! 当按下按钮时。

现在，这是问题所在：

我已经使用nginx在此应用程序上设置了反向代理。 这是sites-available的配置文件（与sites-enabled链接）

server {
    listen 80;
    server_name localhost;

    location /routetest/ {
        proxy_pass http://127.0.0.1:3000/;
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
        proxy_cache_bypass $http_upgrade;
    }
}

当我访问http://localhost/routetest时，该应用程序可以正常打开，但是当我单击按钮时，它会打开http://localhost/getHello而我希望它打开http://localhost/routetest/getHello 。 由于http://localhost/getHello ，因此我得到一个404。（另一方面， http://localhost/routetest/getHello正确返回Hello, world消息）

现在，我的问题是：

我的前端写有/作为基本路径（进行所有GET和POST请求），例如<a href="/getHello"> ，我觉得在HTML中的所有URL之前手动附加 /routetest/并不是一个好习惯（因为稍后可能要更改此基本路径，然后必须在任何地方进行更新）。 那么， NGINX或某些express中间件的方法是否可以为使用/作为基本路径编写的URL添加/routetest/ ，而不必手动在HTML中进行更改？

Answer 1

从长远来看，最简单的解决方案是使用相对路径而不使用前导/如果可以的话）。

在一般情况下，在响应中重写URL介于棘手和不可能之间。 如果您认为可以成功识别内容中的相关URL，则可以使用nginx的标题为ngx_http_sub_module ：

http://nginx.org/en/docs/http/ngx_http_sub_module.html

有多种Express中间件实现可以做类似的事情，但我找不到足够可靠的建议。 如果您愿意自己尝试一下，则基本方法将类似于compression中间件。 同样，这通常很困难，但是取决于您如何提供HTML的细节，它可能还不错。