AngularJS-HTML5模式-无法获取/登录

Hi已经与yeoman、grunt和bower创建了一个angularJS应用程序。 我已经为应用程序启用了HTML5模式。以及它的工作原理。但是，当我刷新页面（localhost:9000/login）时，它会显示

Cannot GET /login //or any url I type or refresh

下面是应用程序结构

MainApp
|
|__app
|  |
|  |__bower_components
|  |
|  |__scripts
|  | |
|  | |__ app.js
|  | |
|  | |__contollers -- login.js, home.js, register.js
|  | |
|  | |__service -- js files
|  | |
|  | |__styles -- CSS files
|  | |
|  | |__views -- main.html, login.html, register.html,home.html
|  |
|  |__ index.html
|
|__ node_modules
|
|__ bower.json, Gruntfile.js, karma-conf.js, karma-e2e.conf.js, package.json

这是我的app.js路由

'use strict';    
var superClientApp=angular.module('mainApp', ['ngCookies']);

//Define Routing for app
superClientApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginController'
    })
    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
      })
    .when('/home', {
       templateUrl: 'views/home.html',
       controller: 'homeController'
    })
    .otherwise({
       redirectTo: '/login'
    });
    $locationProvider.html5Mode(true);
}]);

这是我在Gruntile.js中的角色

'use strict';
var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
var mountFolder = function (connect, dir) {
  return connect.static(require('path').resolve(dir));
};
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {
  require('load-grunt-tasks')(grunt);
  require('time-grunt')(grunt);

  // configurable paths
  var yeomanConfig = {
    app: 'app',
    dist: 'dist'
  };

  try {
    yeomanConfig.app = require('./bower.json').appPath || yeomanConfig.app;
  } catch (e) {}

  grunt.initConfig({
    yeoman: yeomanConfig,
    watch: {
      coffee: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
        tasks: ['coffee:dist']
      },
      coffeeTest: {
        files: ['test/spec/{,*/}*.coffee'],
        tasks: ['coffee:test']
      },
      styles: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
        tasks: ['copy:styles', 'autoprefixer']
      },
      livereload: {
        options: {
          livereload: LIVERELOAD_PORT
        },
        files: [
          '<%= yeoman.app %>/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
          '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
      }
    },
    autoprefixer: {
      options: ['last 1 version'],
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '.tmp/styles/'
        }]
      }
    },
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost'
      },
      proxies: [
        {
            context: '/serverApp',
            host: 'localhost',
            port: '8080',
            https: false,
            changeOrigin: false
        }
      ],
      livereload: {
        options: {
          middleware: function (connect) {
            return [
              lrSnippet,
              proxySnippet,
              mountFolder(connect, '.tmp'),
              mountFolder(connect, yeomanConfig.app)
            ];
          }
        }
      },

“严格使用”；
var LIVERELOAD_PORT=35729；
var lrnippet=require（'connect-livereload'）（{port:livereload_port}）；
var mountFolder=函数（连接，目录）{
返回connect.static（require（'path'）.resolve（dir））；
};
var proxysippet=require（'grunt-connect-proxy/lib/utils'）。proxyRequest；
//#全球化
//出于性能原因，我们只降低了一个级别：
//'test/spec/{，*/}*.js'
//如果要递归匹配所有子文件夹，请使用此选项：
//“test/spec/***.js”
module.exports=函数（grunt）{
要求（'load-grunt-tasks'）（grunt）；
要求（“时间咕噜”）（咕噜）；
//可配置路径
var yeomanConfig={
应用程序：“应用程序”，
dist:“dist”
};
试一试{
yeomanConfig.app=require（'./bower.json'）.appPath | | yeomanConfig.app；
}捕获（e）{}
grunt.initConfig({
约曼：约曼图，
观察：{
咖啡：{
文件：['/scripts/{，*/}*.coffee']，
任务：['coffee:dist']
},
咖啡测试：{
文件：['test/spec/{，*/}*.coffee']，
任务：[“咖啡：测试”]
},
风格：{
文件：['/styles/{，*/}*.css']，
任务：['copy:styles'，'autoprefixer']
},
利弗雷罗德：{
选项：{
利弗雷洛德：利弗雷洛德港口
},
档案：[
'/{，*/}*.html'，
“.tmp/styles/{，*/}*.css”，
“{.tmp，}/scripts/{，*/}*.js”，
“/images/{，*/}*{png，jpg，jpeg，gif，webp，svg}”
]
}
},
自动刷新器：{
选项：[“上一版本”]，
地区：{
档案：[{
是的，
cwd:“.tmp/styles/”，
src:'{，*/}*.css',，
目标：'.tmp/styles/'
}]
}
},
连接：{
选项：{
港口：9000，
//将此更改为“0.0.0.0”以从外部访问服务器。
主机名：“localhost”
},
代理：[
{
上下文：'/serverApp'，
主机：“localhost”，
端口：“8080”，
https:false，
更改来源：错误
}
],
利弗雷罗德：{
选项：{
中间件：功能（连接）{
返回[
小片段，
proxySnippet，
mountFolder（连接“.tmp”），
mountFolder（连接，yeomanConfig.app）
];
}
}
},

我已经通过了。基于，我将Gruntfile.js改为如下

'use strict';
var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
var mountFolder = function (connect, dir) {
  return connect.static(require('path').resolve(dir));
};
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

var urlRewrite = require('grunt-connect-rewrite');

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {
  require('load-grunt-tasks')(grunt);
  require('time-grunt')(grunt);

  // configurable paths
  var yeomanConfig = {
    app: 'app',
    dist: 'dist'
  };

  try {
    yeomanConfig.app = require('./bower.json').appPath || yeomanConfig.app;
  } catch (e) {}

  grunt.initConfig({
    yeoman: yeomanConfig,
    watch: {
      coffee: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
        tasks: ['coffee:dist']
      },
      coffeeTest: {
        files: ['test/spec/{,*/}*.coffee'],
        tasks: ['coffee:test']
      },
      styles: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
        tasks: ['copy:styles', 'autoprefixer']
      },
      livereload: {
        options: {
          livereload: LIVERELOAD_PORT
        },
        files: [
          '<%= yeoman.app %>/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
          '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
      }
    },
    autoprefixer: {
      options: ['last 1 version'],
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '.tmp/styles/'
        }]
      }
    },
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        base: 'app',
        middleware: function(connect, options) {
            // Return array of whatever middlewares you want
            return [
              // redirect all urls to index.html in build folder
              urlRewrite('app', 'index.html'),

              // Serve static files.
              connect.static(options.base),

              // Make empty directories browsable.
              connect.directory(options.base)
            ];
          }
      },
      proxies: [
        {
            context: '/serverApp',
            host: 'localhost',
            port: '8080',
            https: false,
            changeOrigin: false
        }
      ],
      livereload: {
        options: {
          middleware: function (connect) {
            return [
              lrSnippet,
              proxySnippet,
              mountFolder(connect, '.tmp'),
              mountFolder(connect, yeomanConfig.app)
            ];
          }
        }
      },

“严格使用”；
var LIVERELOAD_PORT=35729；
var lrnippet=require（'connect-livereload'）（{port:livereload_port}）；
var mountFolder=函数（连接，目录）{
返回connect.static（require（'path'）.resolve（dir））；
};
var proxysippet=require（'grunt-connect-proxy/lib/utils'）。proxyRequest；
var urlRewrite=require（'grunt-connect-rewrite'）；
//#全球化
//出于性能原因，我们只降低了一个级别：
//'test/spec/{，*/}*.js'
//如果要递归匹配所有子文件夹，请使用此选项：
//“test/spec/***.js”
module.exports=函数（grunt）{
要求（'load-grunt-tasks'）（grunt）；
要求（“时间咕噜”）（咕噜）；
//可配置路径
var yeomanConfig={
应用程序：“应用程序”，
dist:“dist”
};
试一试{
yeomanConfig.app=require（'./bower.json'）.appPath | | yeomanConfig.app；
}捕获（e）{}
grunt.initConfig({
约曼：约曼图，
观察：{
咖啡：{
文件：['/scripts/{，*/}*.coffee']，
任务：['coffee:dist']
},
咖啡测试：{
文件：['test/spec/{，*/}*.coffee']，
任务：[“咖啡：测试”]
},
风格：{
文件：['/styles/{，*/}*.css']，
任务：['copy:styles'，'autoprefixer']
},
利弗雷罗德：{
选项：{
利弗雷洛德：利弗雷洛德港口
},
档案：[
'/{，*/}*.html'，
“.tmp/styles/{，*/}*.css”，
“{.tmp，}/scripts/{，*/}*.js”，
“/images/{，*/}*{png，jpg，jpeg，gif，webp，svg}”
]
}
},
自动刷新器：{
选项：[“上一版本”]，
地区：{
档案：[{
是的，
cwd:“.tmp/styles/”，
src:'{，*/}*.css',，
目标：'.tmp/styles/'
}]
}
},
连接：{
选项：{
港口：9000，
//将此更改为“0.0.0.0”以从外部访问服务器。
主机名：“localhost”，
base:'应用程序'，
中间件：功能（连接、选项）{
//返回您想要的任何中间件的数组
返回[
//将所有URL重定向到生成文件夹中的index.html
URL重写（'app'，'index.html'），
//提供静态文件。
连接。静态（选项。基础），
//使空目录可浏览。
connect.directory（options.base）
];
}
},
代理：[
{
上下文：'/serverApp'，
主机：“localhost”，
端口：“8080”，
https:false，
更改来源：错误
}
],
利弗雷罗德：{
选项：{
中间件：功能（连接）{
返回[
小片段，
proxySnippet，
mountFolder（连接“.tmp”），
mountFolder（连接，yeomanConfig.app）
];
}
}
},

---

但我在刷新页面时仍然遇到相同的错误。如何解决此问题？

您是否尝试在

$routeProvider

中使用绝对路径

.when('/login', {
  templateUrl: '../app/scripts/views/login.html',
  controller: 'loginController'
},
...

---

发生这种情况的原因是，当您按“刷新”时，浏览器将尝试从服务器检索/登录，而不是通过客户端路由提供程序。我假设/login在您的ca中返回404

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /the-base-from-index.html/


    RewriteEngine on
    RewriteCond %{HTTP:X-Requested-With} !XMLHttpRequest$
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule . index.html [L]
</IfModule>

 myapp.config(function($httpProvider) {
      $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
 });

var express = require('express');
var bodyParser = require('body-parser')
var path = require('path')
var app = express();

app.use(express.static(__dirname + '/app'));
app.get('/*', function(req, res){
  res.sendFile(__dirname + '/app/index.html');
});

app.listen(9090);
console.log("Node Server Listening on port 9090");

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