提问人：tayden 提问时间：5/25/2016 更新时间：10/31/2020 访问量：2554
使用 Apache 反向代理的 React-router url 不匹配
React-router urls don't match using Apache reverse proxy
问：
我正在尝试在 Apache 中设置一个反向代理来提供 React/Redux/webpack 捆绑包。我有一个快速服务器文件，提供我的静态文件和索引 .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 bundle 已正确提供，但 React 路由器抛出一个错误，指出与任何路由都不匹配。显然，这是因为是该应用程序的代理位置，而 react router 没有（也不应该）考虑生产中使用的代理路径。/foo//foo
如何设置 Apache，以便在将请求发送到 时，路径不会被 apache 传递？换句话说，您如何设置 proxypass，以便将请求转换为服务器上的请求，然后像来自 example.com/foo/bar 一样返回到客户端？localhost:8777/fooexample.com/foo/barlocalhost:8777/bar
答：
0赞
Yessenpai
3/4/2020
#1
我的团队也遇到了类似的问题，他们解决的方法是使用带有强制重定向 [R] 的 RewriteRule，然后让 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？
希望其中一些可以有所帮助。
0赞
tomnyson
10/31/2020
#2
更改 Nginx 服务器更灵活、更简单的配置
server {
listen 80 default_server;
listen [::]:80 default_server;
root /usr/share/nginx/html/web;
location / {
try_files $uri /index.html;
}
}
评论