使用 AngularJS HTML5 模式重新加载页面会给出错误的 GET 请求 [英] Reloading the page gives wrong GET request with AngularJS HTML5 mode

问题描述

我想为我的应用启用 HTML5 模式.我已经为配置添加了以下代码，如此处所示:>

return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {$locationProvider.html5Mode(true);$locationProvider.hashPrefix = '!';$routeProvider.when('/', {templateUrl: '/views/index.html',控制器:'indexCtrl'});$routeProvider.when('/关于',{templateUrl: '/views/about.html',控制器:'关于Ctrl'});

如您所见，我使用了 $locationProvider.html5mode 并更改了 ng-href 中的所有链接以排除 /#/.

问题

目前，我可以转到 localhost:9000/ 并查看索引页面并导航到其他页面，例如 localhost:9000/about.

然而，当我刷新localhost:9000/about页面时，问题出现了.我得到以下输出:Cannot GET/about

如果我查看网络调用:

请求 URL:localhost:9000/about请求方式:GET

如果我首先转到 localhost:9000/ 然后单击导航到 /about 的按钮，我得到:

请求地址:http://localhost:9000/views/about.html

完美呈现页面.

如何在刷新时启用 angular 以获得正确的页面?

解决方案

来自 angular docs

<块引用>

服务器端
使用这种模式需要在服务器端重写 URL，基本上你必须重写所有指向应用程序入口点的链接(例如 index.html)

这样做的原因是当您第一次访问页面 (/about) 时，例如刷新后，浏览器无法知道这不是真正的 URL，因此它会继续加载它.但是，如果您首先加载了根页面和所有 javascript 代码，那么当您导航到 /about 时，Angular 可以在浏览器尝试访问服务器并相应地处理它之前进入那里>

I want to enable HTML5 mode for my app. I have put the following code for the configuration, as shown here:

return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';

    $routeProvider.when('/', {
        templateUrl: '/views/index.html',
        controller: 'indexCtrl'
    });
    $routeProvider.when('/about',{
        templateUrl: '/views/about.html',
        controller: 'AboutCtrl'
    });

As you can see, I used the $locationProvider.html5mode and I changed all my links at the ng-href to exclude the /#/.

The Problem

At the moment, I can go to localhost:9000/ and see the index page and navigate to the other pages like localhost:9000/about.

However, the problem occurs when I refresh the localhost:9000/about page. I get the following output: Cannot GET /about

If I look at the network calls:

Request URL:localhost:9000/about
Request Method:GET

While if I first go to localhost:9000/ and then click on a button that navigates to /about I get:

Request URL:http://localhost:9000/views/about.html

Which renders the page perfectly.

How can I enable angular to get the correct page when I refresh?

解决方案

From the angular docs

Server side
Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

The reason for this is that when you first visit the page (/about), e.g. after a refresh, the browser has no way of knowing that this isn't a real URL, so it goes ahead and loads it. However if you have loaded up the root page first, and all the javascript code, then when you navigate to /about Angular can get in there before the browser tries to hit the server and handle it accordingly

这篇关于使用 AngularJS HTML5 模式重新加载页面会给出错误的 GET 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！