无法获取 - 使用 Ionic 刷新后出错

Question

我正在使用 Ionic 框架来构建一个混合移动应用程序，并且我将 html5Mode 设置为 true、Ui-Router 和 gulp 来为我提供 livereload、sass 编译、css 和 javascript 压缩。

问题是，每当我直接从索引导航到某个状态时，一切正常，正在向我的服务器发出请求，但是当我刷新相同的状态时，我得到了 Cannot GET 错误。

我将 Ionic 应用程序与我的 Express.JS 应用程序分开处理。

这里有一些代码：

国家

 $stateProvider

 .state('faculties', {
    url: '/',
    templateUrl: 'views/main/main.html',
    controller: 'MainCtrl as main'
  })

  .state('faculty', {
    url: 'faculties/:faculty',
    templateUrl: 'views/faculty/faculty.html',
    controller: 'FacultyCtrl as v'
  })

所以，如果我打开页面并单击将我带到“教师”状态的按钮，那一切都很好。但是，如果我刷新该页面，它会给我无法获取错误。 这是来自“教师”状态控制器的代码：

  app.controller('FacultyCtrl', function ($http, $stateParams, appConfig) {

  var v = this;
  var api = appConfig.api;
  v.faculty = {};

  $http.get( api + '/faculties/' + $stateParams.faculty)
  .then( res => {
    v.faculty = res.data;
  }).catch( error => {
    console.log(error);
  });

});

Answer 1

您遇到的问题是您没有将所有可能的网址路由到相同的index.html

当您第一次加载页面时，例如 URL 为 http://example.com/，您的 Web 服务器将从您的根目录提供静态文件 index.html。更改路由时，您的 URL 以（例如）http://example.com/some_page 结尾。这是有效的，因为 URL 是“伪造的”，服务器上没有这样的文件。刷新（或直接访问该 URL）时，从服务器请求该 URL，但失败（因为和以前一样，该文件/文件夹不存在）。

您需要做的是将所有请求（不包括 API 等）路由到相同的静态 index.html，这是所有单页应用程序的标准行为： 路由是在客户端完成的。