html 5模式删除angularjs + nodejs中的哈希答案

【问题标题】：html 5 mode remove hash in angularjs+nodejshtml 5模式删除angularjs + nodejs中的哈希
【发布时间】：2016-10-25 13:43:59
【问题描述】：

我是平均堆栈的新手，我想删除浏览器 URL 中的哈希值。我成功地做到了，但是当我刷新页面时，出现“找不到网络错误 404”，所以请帮我解决这个问题.

下面是 index.html 文件的代码。

 <script>
  var base = document.createElement('base');
         base.href = 'http://localhost:3000/';
         document.getElementsByTagName('head')[0].appendChild(base);
       </script>

下面是config.router.js的代码

angular.module('app')
        .config(
                ['$stateProvider', '$urlRouterProvider','$locationProvider', 'MODULE_CONFIG',
                    function ($stateProvider, $urlRouterProvider,$locationProvider, MODULE_CONFIG) {
                     $locationProvider.html5Mode(true).hashPrefix('!');

下面是node.js的server.js文件的代码

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var routes = require('./routes/index');
var country = require('./routes/country');
var category = require('./routes/Category');
var attributes = require('./routes/Attribute');
var subscription = require('./routes/subscription');
var mall = require('./routes/mall');
var http = require('http');
var user = require('./routes/user');
var app = express();
//var cors = require('cors');
// view engine setup
//app.use(cors());
app.set('views', path.join(__dirname, '../app'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true }));
app.use(bodyParser.json({limit: '50mb'}));
app.use(function(req, res, next) {

  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
});
app.use(cookieParser());
//app.use(bodyParser({limit: '50mb'}));
app.use(express.static(path.join(__dirname, '../app/')));
/*allowCrossDomain = function(req, res, next) {


  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length');
  next();
};

app.use(allowCrossDomain);*/
app.use(express.static(path.join(__dirname, '../app/')));
app.use('/', routes);
app.use('/api/user', user);
app.use('/api/country', country);
app.use('/api/city', country);
app.use('/api/state', country);
app.use('/api/mall', mall);
app.use('/api/category', category);
app.use('/api/attributes', attributes);
app.use('/api/subscription', subscription);
app.set('port',3000);
mongoose.connect('mongodb://52.39.244.83    /deals');
var db = mongoose.connection;
db.on('error',erroroccured);
db.once('open',startserver);
function erroroccured(){
    console.log('error');

}
function startserver(){
//  mongoose.set( "debug", true );
    var server = app.listen(app.get('port'), function() {
        console.log('Server listening on port ' + server.address().port);
    });
}

module.exports = app;

所以请帮助我摆脱这个问题，谢谢大家。

【问题讨论】：

参考this - https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode。您的情况需要重写 ExpessJS 路由。
感谢大家，我找到了解决方案，非常感谢您的建议，这是一个在 express js 中重写的问题，而不是在 angularside。它在 angularside 中可以。

标签： javascript angularjs node.js mean-stack

【解决方案1】：

因为您已经定义了 hashPrefix('!') 配置，您的网址现在将是

index.html#!/path

如果你想要一个普通的 HTML5 模式样式，比如

index.html/path

只是不要定义hashPrefix。默认为''。

此外，您还可以摆脱基本标记，但这可能会产生问题，将定义基本标记，将其定义为

  <head>
    <base href="/">
  </head>

而不是localhost:3000，因为这会在您的服务器上失败。

【讨论】：

【解决方案2】：

我觉得用这个应该没问题

$locationProvider.html5Mode(true);

在html中

<head>
  <base href="/">
</head>

【讨论】：