HTML 5模式移除angularjs+nodejs中的散列

html 5 mode remove hash in angularjs+nodejs

本文关键字：angularjs+nodejs 模式 HTML      更新时间：2023-09-26

我在mean stack中是新的，我想删除浏览器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;

所以请帮助我从这个问题中走出来，感谢所有的提前。

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

index.html#!/path

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

index.html/path

就是不要定义hashPrefix。默认为"''"。

另外，你也可以去掉基本标签，但这可能会产生问题，我们要定义一个基本标签，定义它为

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

代替localhost:3000，因为这会在您的服务器上失败。

我觉得用这个就可以了

$locationProvider.html5Mode(true);

和html

<head>
  <base href="/">
</head>
相关文章：