使用HTML5历史路由的SPA的Apache设置

Question

我的团队最近将我们的旧SPA路由实现从基于散列的路由更新为HTML5历史路由。现在我们需要更新我们的Apache设置，以允许SPA处理“干净的URL”。使用FallbackResource指令很容易：

FallbackResource /index.html

这会为所有未实际映射到磁盘上的文件/目录的文件和目录请求加载SPA。

但是，我仍然希望实际上不存在的文件加载我们的服务器404.html页面并以404状态响应，而不是“退回”到SPA index.html。

我怎样才能将Apache配置为仅回退到index.html页面以查找不存在的目录（/some/route），但是对于不存在的文件请求（/somefile.css）呈现404状态和页面？

我尝试了各种RewriteCond/RewriteRule组合，没有运气。

提前致谢！

Answer 1

既然你希望能够为目录提供一种响应，或者看起来像目录的路径（例如/financing/terms），以及对文件的不同类型的响应，那么我相信Files directive就是你正在寻找的。

我创建了一个branch in a GitHub repo，它有一个带有Apache的Docker镜像和一个来自Ember的示例单页应用程序来演示解决方案。要测试它，克隆repo并检查fallbackresource分支。从那里开始，假设您已安装Docker，请按照自述文件中的说明进行操作。服务器将从端口80开始，然后您可以访问http://localhost。 SPA运行的屏幕截图如下。

一旦单页应用程序启动并重定向，Localhost就会重定向到http://localhost/rentals。注意网络选项卡中的404 - 有一个指向不存在的JS文件的链接，该文件抛出404而不是回退到index.html文件。

这是由于配置文件中的Files指令（可在下面和the source for that branch中查看）。

# Map all SPA-looking routes to our single page app index file
<Directory ~ "^/[\w+\d+-]+">
  FallbackResource /index.html
</Directory>

# Requests for files should return a real 404 and not fallback to the index.html page, though
<Files ~ "\.(js|css|gif|jpe?g|png)$">
  FallbackResource disabled
  ErrorDocument 404 "File not found"
</Files>

Directory指令使用正则表达式匹配单词字符，数字和连字符，以便您可能希望映射到SPA路由的路由应回退到index.html文件。但是，单个文件类型请求不会回退，因为Files指令禁用FallbackResource属性。

在Apache配置中组合这两个指令应该可以为您提供拍摄的行为。