Angular ui-router 按下刷新会导致 404 错误 [英] Angular ui-router pressing refresh causes 404 error

问题描述

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

OK, I know this is an open ended question, but -

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

I'm running an application using AngularJS 1.4.x and ui-router. For the most part everything works fine and as expected. My various pages use ui-sref's to navigate, pages show up as expected, and the URL that's showing looks correct. However, if I refresh the page (F5) on any page at all, it causes a 404 error to occur. And typing in the URL no longer works.

可能涉及的事情:

• 我打开了 $locationProvider.html5Mode(true) 标志

• 我用

• I turned on the $locationProvider.html5Mode(true) flag

• I use

$rootScope.$on('$stateChangeStart', function (event, toState,toParams)

$rootScope.$on('$stateChangeStart', function (event, toState, toParams)

管理页面访问(身份验证)

to manage page access (authentication)

推荐答案

问:当你刷新页面时，实际发生了什么?

Q: When you refresh the page, what is actually happening?

答:您正在通过浏览器向服务器发送 HTTP 请求.GET/whatever.所以服务器需要为这个请求设置一个路由，响应 index.html.目前，您收到的是 404，因为您的服务器没有与 GET/whatever 的请求相匹配的路由.

A: You're sending an HTTP request via your browser to a server. GET /whatever. So the server will need to have a route set up for this request that responds with index.html. Currently, you're getting a 404 because your server doesn't have a route that matches the request to GET /whatever.

问:为什么?

答:当您通过浏览器(而不是通过 AJAX)发出请求时，您的浏览器会尝试向您显示响应.前任.如果响应是 JSON，它会显示 JSON.如果它是一个字符串，它会显示一个字符串.如果它是一个 html 页面，它会显示给你.你不能只为任何路线发回一个模板，因为如果你这样做，它只会在没有其他上下文的情况下呈现该模板.您需要 index.html 来加载 angular、运行控制器、将模板放入它的 ui-view 容器等.

A: When you make a request via your browser (rather than through AJAX), your browser will try to display the response to you. Ex. if the response is JSON, it'll show you JSON. If it's a string, it'll show you a string. If it's an html page, it'll show you that. You can't just send back a template for whatever route, because if you do, it'll just render that template with no other context. You need index.html to load angular, run your controller, place the template in it's ui-view container, etc.

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

(What'll happen is index.html will be sent back, UI Router will check the route, make a request for the templateUrl, run the controller, and then render it.)

问:如何?

A:这取决于 a) 您使用的服务器类型和 b) 您的文件结构.您可能希望在为 index.html 提供服务的路由文件的末尾添加某种捕获所有路由.这就是我使用 Node/Express 的方式:

A: That depends on a) what type of server you're using and b) your file structure. You'll probably want some sort of catch all route at the end of your route file that serves index.html. This is how I do it with 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();
  });
});

这篇关于Angular ui-router 按下刷新会导致 404 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！