使用 Apache 反向代理的 React-router url 不匹配

Posted 2023-02-22

【中文标题】使用 Apache 反向代理的 React-router url 不匹配

【英文标题】：React-router urls don't match using Apache reverse proxy

【发布时间】：2016-09-22 03:37:35

【问题描述】：

我正在尝试在 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 是该应用程序的代理位置，而 React 路由器不需要（也不应该）考虑生产中使用的代理路径。

如何设置 Apache，以便当请求发送到 localhost:8777 时，/foo 路径不会被 apache 传递？换句话说，您如何设置 proxypass 以便对 example.com/foo/bar 的请求在服务器上转换为对 localhost:8777/bar 的请求，然后像来自 example.com/foo/bar 一样返回给客户端？

【问题讨论】：

我也遇到了同样的问题。想知道你是否找到了一个好的解决方案，tayden？

@MattSidor 我从来没有这样做过。我最终更改了我的反应路由器 URL 以包含代理位置，以便页面按预期呈现。我仍然很乐意找到更好的解决方案

这能解决您的问题吗？ https://***.com/questions/45570841/proxy-react-server-behind-apache/48964874#48964874

【参考方案1】：

改变 nginx 服务器更灵活和简单的配置

server  
  listen 80 default_server;
  listen [::]:80 default_server;
  root /usr/share/nginx/html/web;
  location / 
  try_files $uri /index.html;

【参考方案2】：

我的团队遇到了类似的问题，他们解决的方法是使用带有强制重定向 [R] 的 RewriteRule，然后让 Apache 代理通过。所以也许你可以试试看：

<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一样返回给客户端？

希望对你有所帮助。