服务器端响应以允许客户端路由

Question

我正在开发一个具有客户端路由器的单页应用程序。因此，尽管运行应用程序的基本 url 将是 http:://example.com 或 http:://example.com/index.html - 跳过路由 '/' 和 '/index.html 的域名'

但是在我的应用程序的某个地方，由于我的客户端路由器，我可能会调用类似 '/appointments/20160113 的路由，并且客户端路由器会将我重定向到我的 SPA 中的适当“约会页面”，并传递参数今天的日期。

但是如果用户直接调用http://example.com/appointments/20160113，我被引导相信服务器应该直接响应/index.html，这样浏览器就不会得到404。

我正在使用 nodejs 构建服务器（特别是 http2 模块，但我认为这不是很重要，而且我的示例不使用 https，尽管它们使用 http2）。我只是尝试更改服务器，因此如果它遇到未知 url，它会使用 index.html 文件进行响应。

然而，浏览器将此视为它的第一个响应，然后请求其相对于 url 的其余附加文件（因此例如跟进 /appointments/20160113/styles/main .css）。这会导致无限循环，因为服务器会以 index.html 中的另一个副本进行响应（并立即返回对 /appointments/20160113/styles/styles/main.css 的请求）。

在页面的生命周期中运行 javascript（尤其是路由器软件）还为时过早，因此显然这种方法过于简单。

我还编写了客户端路由器（使用历史 API），因此我可以根据需要进行更改。

应该如何处理这种情况。我在想可能是 301 重定向到 /index.html 或其他东西，然后路由器的初始调度知道这一点并且可以执行 popstate 或其他东西。理想情况下，我希望支持通过外部方式在用户之间传递 url，但在我真正尝试实现它之前，我还没有意识到其中的含义。

Answer 1

我不知道这是否是最好的方法，但在这里没有收到任何答案，我决定尝试多种不同的方法，看看哪种方法效果最好。

每种方式都涉及到 /index.html 的 301 重定向，然后通过不同的机制提供我从中重定向的 url

这是我尝试过的

1. 设置一个有效期较短的cookie，其值为url
2. 在 url 中添加带有 ?redirect= 参数的查询字符串
3. 在 /index.html 之后添加一个带有 url 的#fragment

最后我拒绝了 1) 因为 chrome 在我使用它之后并没有删除 cookie，并且使值缩短取决于客户端和服务器之间的准确时间。解决方案似乎太脆弱了。

我尝试了 2)，它看起来不错，直到我来测试它。不幸的是，设置 window.location.search 会导致页面重新加载，我真的很难找出发生了什么。但是，我在 3) 中发现的关于模拟的内容很可能会提供给基于 2) 的解决方案，因此它是可以使用的。我仍然可能会回到这个解决方案，因为它对我来说“感觉”是正确的。

我尝试了 3)，效果很好。但是，由于我的路由器元素在初始化期间使用#fragment，因此我在测试中遇到了计时问题，但是直到在测试套件中建立路由器之后，我才能设置 window.location.hash。我想用 sinon 模拟 window.location.hash 以便我可以控制它，但事实证明你不能

解决方案是让路由器将自己对 window.location.hash 的调用包装在一个库中，以便我可以模拟该库。这就是我最终所做的，一切都奏效了。

我可以返回使用查询字符串并在库调用中包装 window.location.search，这样我就可以存根该调用并避免页面重新加载的问题。