javascript - 刷新 Angular RouteProvider 路由会导致 Python 出现 404 错误

Question

我的 url 映射使用 Angular ng-route 模块效果很好，直到我点击刷新。然后我收到 404 错误。我在 python SimpleHTTPServer 上使用纯 html

目录树

.
└── test1
    ├── html
    └── static
        ├── css
        └── js

服务器在 test1 目录中运行，所有 html 文件都在 html 文件夹中

路由在app.js内部完成

var eclassApp = angular.module('eclassApp', 
    ['ngRoute', 'eclassControllers' ]
);

eclassApp.config(['$routeProvider','$locationProvider',
    function ($routeProvider, $locationProvider){
        $routeProvider.
            when('/',{
                templateUrl: '/html/student-list.html',
                controller: 'StudentsListCtrl',
            }).
            when('/students/:studentId',{
                templateUrl: '/html/student-details.html',
                controller: 'StudentDetailsCtrl',

            }).otherwise({
                redirectTo: '/'
            });
            $locationProvider.html5Mode({
                enabled:true
            });
    }]
);

我可以从应用程序内导航到我的网址，但在页面上并刷新时我收到 404 错误。回顾(历史)我得到同样的错误。这是为什么？是因为我没有使用哈希符号吗？

Answer 1

Angular 中的 HTML5 模式使用 PushState，无需发出服务器请求即可静默更改 URL。这不适用于新请求或刷新。从服务器提供的 HTML 是始终/index.html。 HTML PushState 在实际加载之前无法更改服务器页面，但实际上无法从 /students/1234 请求的 url 加载(作为代码中的示例)。

在 Python SimpleHTTPServer 中，您可以按照此代码行添加一些内容来强制服务器加载 /index.html:

if not os.path.exists(request_file_path):
    self.path = 'index.html'

如果您使用默认路由模式，则行为会完全不同。 “哈希”路由使用 #，为您提供类似 /index.html/#/students/1234 的路由。浏览器将哈希值解释为 anchor ，您的服务器将始终收到对 /index.html 的正确请求。

但是，需要注意的一件事是，由于脚本加载时间的原因，初始哈希路由可能不会被路由提供者拦截，因为脚本必须先加载才能解释哈希字符串。在哈希路由模式下，页面刷新加载默认状态是很常见的。