重新加载页面给AngularJS HTML5模式提供了错误的GET请求

我想为我的应用启用HTML5模式。 我已经为配置放置了下面的代码，如下所示：

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'
    });

正如你所看到的，我使用了$locationProvider.html5mode并且我在ng-ref中更改了所有的链接以排除/#/ 。

问题

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

但是，当我刷新localhost:9000/about页面时会发生此问题。 我得到以下输出： Cannot GET /about

如果我看网络电话：

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

如果我先到localhost:9000/然后点击导航到/about的按钮，我会得到：

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

它使页面完美呈现。

我如何启用角度来刷新时获得正确的页面？

---

从角度文档

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

原因是当你第一次访问页面（ /about ），例如刷新后，浏览器无法知道这不是一个真正的URL，所以它继续并加载它。 但是，如果您首先加载了根页面和所有JavaScript代码，那么当您导航到/about Angular时，可以在浏览器尝试点击服务器并相应处理之前进入该页面

---

有几件事情需要设置，所以你的浏览器链接看起来像http://yourdomain.com/path ，这些是你的角度配置+服务器端

1）AngularJS

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

2）服务器端，只需将.htaccess放入根文件夹并粘贴即可

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

更有趣的东西阅读有关angularjs html5模式和每个不同的环境所需的配置https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode另外这个问题可能会帮助你$位置/切换html5和hashbang模式/链接重写

---

我有一个类似的问题，我解决了它：

在索引页面中使用<base href="/index.html">

在节点/ Express服务器中使用捕获所有路由中间件，如下所示（将其放在路由器之后）：

app.use(function(req, res) {
    res.sendfile(__dirname + '/Public/index.html');
});

我认为这应该让你运转起来。

如果你使用apache服务器，你可能想要mod_rewrite你的链接。 这并不难。 只是在配置文件中的一些变化。

所有这一切都假设你已经在angularjs上启用了html5mode。 现在。 请注意，在角1.2中，实际上不再推荐声明基本网址。

链接地址: http://www.djcxy.com/p/68987.html

上一篇: Reloading the page gives wrong GET request with AngularJS HTML5 mode

下一篇: How to include view/partial specific styling in AngularJS