当 html5Mode 为真时，AngularJs 路由对服务器进行 HTTP 调用

Posted 2023-04-14

【中文标题】当 html5Mode 为真时，AngularJs 路由对服务器进行 HTTP 调用

【英文标题】：AngularJs route making HTTP call to the server when html5Mode is true

【发布时间】：2015-05-20 06:07:50

【问题描述】：

我已在我的应用程序中将 html5Mode 设置为 true。我的路线定义如下：

app.config(['$routeProvider', '$locationProvider',
    function ($routeProvider, $locationProvider) 
        $locationProvider.html5Mode(true);
        $locationProvider.hashPrefix('!');

        $routeProvider.
            when('/api/', 
                templateUrl: '../../html/console.html',
                controller: 'paramsController'
            ).
            when('/', 
                templateUrl: '../../html/timeline.html',
                controller: 'timelineController'
            ).
            otherwise(
                redirectTo: '/'
            );
    ]);

但是每当我以http://localhost:3000/api 发出请求时，它都会进行 HTTP 调用，请求会发送到服务器，而不是解析到我的角度路由。

这里有什么需要注意的。

我的主页添加了以下标签：

<base href="/">

只是说明一下，以防它在这里改变任何东西。 是否需要其他配置。我将node.js 用作express.js 的服务器。

【问题讨论】：

HTML5 模式将始终对任何不是由 Angular 直接生成的东西发出服务器请求；只有使用哈希路由（#/）才能避免服务器调用。服务器必须设置为将不打算处理的任何内容重定向回您的 index.html。在同一浏览器会话中来自 Angular 的请求可以通过利用 HTML5 推送状态来避免服务器调用，但来自其他来源的请求通常不会使用推送状态来访问您的 Angular 应用程序。

【参考方案1】：

发生这种情况的原因是您访问的 URL 未提供您的前端应用程序并且服务器未正确配置。

您实际上需要在服务器上重写 URL 才能使其工作。

参见angularJS官方documentation的解释。

【参考方案2】：

正如@oLeduc 在他的评论中提到的，这是因为没有在服务器端配置 URL 重写。

我在服务器端路由中添加了以下内容（我使用的是 expressjs）。

app.all('/*', function(req, res) 
    console.log("Server re-writing for angular routing");
    res.sendfile('home.html');
);

这使路由能够重定向回为home.html 配置的角度路由。

可以从以下位置更改模式：

'/*' to '/api/*`

如果你想匹配 UI 路由说/api/test

【讨论】：

是home.html实际上是在正常请求中发送的整个HTML？