Question

好的，我知道这是一个开放式问题，但是 -

我正在使用AngularJS 1.4.x和ui-router运行应用程序。在大多数情况下，一切正常并且如预期的那样。我的各个页面使用ui-sref来导航，页面按预期显示，并且显示的URL看起来正确。但是，如果我在任何页面上刷新页面（F5），则会导致404错误。输入URL不再有效。

可能涉及的事情：

我打开了$locationProvider.html5Mode(true)旗帜
我用

$ rootScope。$ on（'$ stateChangeStart'，function（event，toState， toParams）

管理页面访问（身份验证）
<base href="/">是在我的index.html中，因为没有它html5Mode（）将不起作用

Answer 1

问：刷新页面时，实际发生了什么？

答：您正在通过浏览器向服务器发送HTTP请求。 GET /whatever。因此，服务器需要为此请求设置路由，以index.html响应。目前，您获得了404，因为您的服务器的路由与GET /whatever的请求不匹配。

问：为什么？

答：当您通过浏览器（而不是通过AJAX）发出请求时，您的浏览器将尝试向您显示响应。防爆。如果响应是JSON，它会向您显示JSON。如果它是一个字符串，它会显示一个字符串。如果它是一个html页面，它会告诉你。您无法为任何路径发回模板，因为如果您这样做，它只会渲染该模板而不需要其他上下文。您需要index.html来加载角度，运行控制器，将模板放在其ui-view容器等中

（将发送index.html将发送的内容，UI路由器将检查路由，发出templateUrl请求，运行控制器，然后呈现它。）< / p> 问：怎么样？

答：这取决于a）您使用的服务器类型和b）您的文件结构。您可能希望在路由文件末尾的所有路由中捕获某种类型的index.html。这就是我使用Node / Express的方式：

app.get('/*', function(req, res) {
  var url = path.resolve(__dirname + '/../client/index.html');
  res.sendFile(url, null, function(err) {
    if (err) res.status(500).send(err);
    else res.status(200).end();
  });
});

Answer 2

@Adam Zerner 很好地描述了它。我还设法找到了这些不错的帖子：

AngularJS HTML5 mode reloading the page gives wrong GET request

Page reload fails when using Angular Ui Router with Html5 mode enabled

所以，鉴于问题在于服务器的路由配置，您显然可以：

检查您的.htaccess设置
在服务器的路由配置中设置一些捕获所有路由配置

或简单地说：

为您的模板提供服务（通过一些简单的通用控制器功能）

这可能听起来与你寻求的动态路由相悖，但由于没有其他选项可以为这个问题提供更好的解决方案，这可能只是简单而优雅的。

考虑一下，在提供的任何其他解决方案中，您仍然需要通过服务器，无论是路由规则还是仅仅提供您的请求 - 成本保持大致相同，即使存在差异 - 它应该可以忽略不计。

Answer 3

这是因为您的服务器路由没有正确设置，并且没有及时加载Angular来处理路由。您需要确保在服务器上设置了一个包含所有非api url调用的索引页面的catch-all路由，以便Angular有机会加载和管理路由。

您尚未指定服务器语言，但在node / express中，它将类似于：

app.use('/*', express.static('./path/to/index.html'));

Angular ui-router按下刷新会导致404错误

3 个答案: