$locationProvider html5mode 在刷新时导致“无法获取”错误 - AngularJS 节点应用程序答案

【问题标题】：$locationProvider html5mode causing "cannot GET" error on refresh - AngularJS Node app$locationProvider html5mode 在刷新时导致“无法获取”错误 - AngularJS 节点应用程序
【发布时间】：2016-08-06 16:00:36
【问题描述】：

我正在尝试使用 locationProvider 从我的 Angularjs 应用程序的 URL 中删除主题标签，并且在我手动刷新页面之前它运行良好。这总是会在浏览器中导致“无法获取 ..”错误。我做了一些研究，我认为我必须使用 .htaccess 文件来重定向，但我不确定如何实现它，我已经在网上搜索了解决方案，但到目前为止没有运气。

这是我的 app.js，它处理路由到我的 Angular 视图和控制器：

(function () {
    'use strict';
    var myApp = angular.module('myApp', ['ngRoute']);
    myApp.config(function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', { 
                templateUrl: 'views/partials/play.html',
                controller: 'playCtrl'
            }).
            when('/dictionary', {
                templateUrl: 'views/partials/dictionary.html', 
                controller: 'dictionaryCtrl'
            }).
            when('/add', {
                templateUrl: 'views/partials/word.html', 
                controller: 'wordCtrl'
            }).
            when('/about', {
                templateUrl: 'views/partials/about.html', 
                controller: 'aboutCtrl'
            }).

            otherwise({redirectTo: '/'});

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    });
})();

我还在 index.html 的 <head> 中添加了这个：

<base href="/">

如果有帮助，该应用程序是使用 Node.js、Express、Angular 和 Mongodb 构建的。

非常感谢。

【问题讨论】：

标签： javascript angularjs node.js mongodb .htaccess

【解决方案1】：

如果其他人想知道您需要将 Node 未使用的所有路由重定向到 Angular：

app.get('*', function(req, res) {
  res.sendfile('./path/to/index.html')
})

这必须在 server.js 中完成。不要忘记在发送文件链接中使用 ./ :)

【讨论】：

很高兴看到 angular 的通用解决方案，而不是使用节点、js 后端和 express 专门针对 angular ...

【解决方案2】：

这取决于 Angular 版本。

最新的Angular 版本需要以下选项：

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

如果您将 $location 配置为使用 html5Mode (history.pushState)，您需要为应用程序指定基本 URL 标记或将 $locationProvider 配置为不需要基本标记将带有requireBase:false 的定义对象传递给 $locationProvider.html5Mode()

模式详情来自官方文档here

因此，您只需要在服务器端处理您在 angular 中描述的每条路由，并在插入 angular 的情况下呈现相同的（可能是索引）页面。

【讨论】：

恐怕这对我不起作用。刷新主页时，没问题，但是任何其他页面，例如 /add 或 /dictionary，我都会收到错误消息。仅在刷新时，从标题中的链接 URL 仍然可以正常工作
@OllyBarca 似乎您的后端没有正确的路由。您应该注意您的服务器响应所有这些请求并使用 Angular 本身呈现主页。
我的后端有路由，但仅用于处理 API 调用。我有这个“app.use(express.static(__dirname + '/public'));”在我的 server.js 中加载 index.html
@OllyBarca express.static 用于静态文件，api调用也不错，但您还需要有一堆渲染索引页面的路由（角度所在的位置）。
好的，最好的方法是什么？使用 .htaccess 文件？我听说有传言说我每次都需要通过 index.html 路由用户。