.htaccess 设置允许 React 路由器工作而不阻止对服务器的 API 调用

Question

当我将 React 应用程序部署到静态服务器时，它在刷新 Web 浏览器时崩溃了。为了解决这个问题，我将以下代码添加到我的 .htaccess 文件中：

RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

这解决了渲染问题，因为它不再发送 URL 的 get 请求，而是使用 React 路由器。然而，这现在导致了一个问题，即任何 API 调用现在都无法到达我的服务器，而是由 index.html 文件提供服务。

任何帮助将不胜感激。

Answer 1

所以，我有点晚了，但你可以添加一个重写条件来检查请求 uri 是否有 api。 假设您的 api 位于根目录的 api/ 文件夹中，因此您的文件夹结构如下所示：

/.htaccess
/index.html ----> your react entry point
/api/ ----> here is your api files
/assets/

您的 htaccess 现在告诉每个请求转到 index.html 文件 但您可以在 .htaccess 的开头添加以下代码来检测 api 调用：

RewriteCond %{REQUEST_URI} ^/api
RewriteRule ^ api/index.php [L]

这应该可行，我使用 xampp 8 测试了它。