angularjs - 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加载 Angular ，运行你的 Controller ，将模板放在它的 ui-view 中容器等

(将会发生的是 index.html 将被送回，UI Router 将检查路由，请求 templateUrl ，运行 Controller ，然后渲染它。)

问:怎么样？

答:这取决于 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();
  });
});