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

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 Router会检查路由，请求templateUrl，运行控制器，然后渲染它。）

问：如何？

A：这取决于 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

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

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

或者简单地说：

1. 提供您的模板（通过一些简单的通用控制器函数）

这听起来可能与您寻求的动态路由背道而驰，但由于没有其他选项可以更好地解决此问题，这可能是最简单和最优雅的一个。

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

Answer 3

这将是由于您的服务器路由设置不正确，并且没有及时加载 Angular 来处理路由。您需要确保在您的服务器上设置了一个包罗万象的路由，该路由为所有非 api url 调用发送您的索引页面，以便 Angular 有机会加载和管理路由。

你没有指定你的服务器语言，但在 node/express 中它会是这样的：

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