使用Apache反向代理,React-router URL不匹配

Question

我正在尝试在Apache中设置反向代理来提供React/Redux/webpack包.我有一个Express服务器文件服务我的静态文件和index.html,如下所示:

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 3000;

app.use(express.static('./dist'));
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

我的apache配置看起来像这样:

<VirtualHost *:80>
  ProxyRequests off
  ProxyPass "/foo/" "http://localhost:8777/"
  ProxyPassReverse "/foo/" "http://localhost:8777/"
</VirtualHost>

现在,当导航到example.com/foo时,我的index.html和webpack包已正确提供,但React路由器抛出一个错误,指出它/foo/与任何路由都不匹配.显然,这是因为/foo该应用程序的代理位置,并且路由器不会(并且不应该)考虑生产中使用的代理路径.

如何配置Apache这样,当请求被发送到localhost:8777的/foo路径没有被Apache通过呢？换句话说,如何设置proxypass以便将请求example.com/foo/bar转换为localhost:8777/bar服务器上的请求,然后返回到客户端,就像它来自example.com/foo/bar一样？

Answer 1

我的团队也遇到了类似的问题，他们解决这个问题的方法是使用 RewriteRule 和强制重定向 [R]，然后让 Apache Proxy pass 捕获它。所以也许你可以尝试一下：

<VirtualHost *:80> ProxyRequests off RewriteRule ^/foo/bar/& /bar/ [R] ProxyPass "/bar/" "http://localhost:8777/" ProxyPassReverse "/bar/" "http://localhost:8777/" </VirtualHost>

我不是 Apache 配置方面的专家，因此您可能需要自己尝试一下 RewriteRule ( https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html#rewriterule )。但是，我相信上述内容可能只是您问题的一部分的答案：

如何设置 proxypass 以便将对 example.com/foo/bar 的请求转换为对服务器上的 localhost:8777/bar 的请求

但我对此不太确定，抱歉：

然后返回给客户端，就好像它来自 example.com/foo/bar？

希望其中一些能有所帮助。