Node.js公共css文件404找不到 [英] Node.js public css files 404 not found

问题描述

我在学习node.js，并且有一个错误，将公共CSS文件提供给一个URL。
它几乎适用于每一页，我在页面上，并从127.0.0.1/css/style.css加载css文件。
当URL是127.0.0.1/project/idProject时，它会尝试从127.0.0.1/project/css/style.css获取css文件。

  // INCLUDE MODULES ===================================== ================== 
 var express = require（'express'）; 
 var app = express（）; 
 var server = require（'http'）。createServer（app）; 
 var io = require（'socket.io'）。listen（server）; 
 var Twig = require（'twig'）; 
 var twig = Twig.twig; 
 var path = require（'path'）; 
 var mongoose = require（'mongoose'）; 
 var passport = require（'passport'）; 
 var flash = require（'connect-flash'）; 
 var configDB = require（'./ config / database.js'）; 
 
 //资产======================================= ========================= 
 app.use（express.static（path.join（__ dirname，'public'）））; 
 app.use（express.favicon（path.join（__ dirname，'public / images / favicon.ico'）））; 
 //启动mongoose 
 mongoose.connect（configDB.url）; 
 
 //用户管理====================================== ================= 
 require（'./ config / passport'）（护照）; //传递护照配置
 app.use（express.logger（'dev'））; //将每个请求记录到控制台
 app.use（express.cookieParser（））; //读取cookies（auth需要）
 app.use（express.json（））; //支持JSON编码的机构
 app.use（express.urlencoded（））; //支持URL编码的主体
 app.set（'view engine'，'twig'）; //为树模板设置树枝
 app.use（express.session（{secret：'ilovescotchscotchyscotchscotch'}））; // session secret 
 app.use（passport.initialize（））; 
 app.use（passport.session（））; //持久登录会话
 app.use（flash（））
 
 // ROUTES ====================== ================================= 
 //设置认证变量
 app.use（函数（req，res，next）{
 app.locals.login = req.isAuthenticated（）; 
 next（）; 
}）; 
 require（'./app/ routes.js'）（app，passport）; 
 
 //错误管理====================================== ================= 
 app.use（app.router）; 
 app.use（函数（req，res，next）{
 res.status（404）; 
 
 //用html页面响应
 if（req。 （'html'））{
 res.render（'errors / 404.twig'，{url：req.url}）; 
 return; 
} 
 //如果（req.accepts（'json'））{
 res.send（{error：'Not found'}）; 
 return; 
} $ b返回json 
 $ b //默认为纯文本send（）
 res.type（'txt'）。send（'not found'）; 
}）; 
 /*app.use(function(err，req，res，next）{
 //我们可以适当地使用错误对象
 //这里和下一个（err）的属性，或者如果
 //我们可能从错误中恢复，则简单地next（）。
 res.status（err.status || 500）; 
 res.render（'errors / 500.twig' ，{error：err}）; 
}）; * / 
 
 // SOCKET IO ===================== ================================== 
 // Quand on client se connecte，on le note dans la console 
 io.sockets.on（'connection'，function（socket）{
 console.log（New connection）; 
}）; 
 
 // LISTEN SERVER ====================================== ================= 
 server.listen（80）; 
  

有关如何解决这个问题的任何想法？

<

解决方案

我尝试了我在评论中看到的方法，并且因为它对我不起作用，所以我发布一个有效的答案。

所有.css文件都是静态的，所以您必须将它们提供给客户端。但是，您不会将静态文件作为明确的中间件提供。因此你必须添加它们。

app.use（express.static（__ dirname，'css'））;

I'm learning node.js and I have an error serving public CSS files to one URL. It works with almost every pages, I go on the page and the css file is loaded from 127.0.0.1/css/style.css. When the URL is 127.0.0.1/project/idProject it tries to get the css file from 127.0.0.1/project/css/style.css.

// INCLUDE MODULES =======================================================
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var Twig = require('twig');
var twig = Twig.twig;
var path = require('path');
var mongoose = require('mongoose');
var passport = require('passport');
var flash    = require('connect-flash');
var configDB = require('./config/database.js');

// Assets ================================================================
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.favicon(path.join(__dirname, 'public/images/favicon.ico'))); 
// Start mongoose
mongoose.connect(configDB.url);

// USER MANAGEMENT =======================================================
require('./config/passport')(passport); // pass passport for configuration
app.use(express.logger('dev')); // log every request to the console
app.use(express.cookieParser()); // read cookies (needed for auth)
app.use(express.json());       // to support JSON-encoded bodies
app.use(express.urlencoded()); // to support URL-encoded bodies
app.set('view engine', 'twig'); // set up twig for templating
app.use(express.session({ secret: 'ilovescotchscotchyscotchscotch' })); // session secret
app.use(passport.initialize());
app.use(passport.session()); // persistent login sessions
app.use(flash())

// ROUTES =======================================================
// Set authentication variable
app.use(function (req, res, next) {
    app.locals.login = req.isAuthenticated();
    next();
});
require('./app/routes.js')(app, passport);

//ERROR MANAGEMENT =======================================================
app.use(app.router);
app.use(function(req, res, next){
  res.status(404);

  // respond with html page
  if (req.accepts('html')) {
    res.render('errors/404.twig', { url: req.url });
    return;
  }
  // respond with json
  if (req.accepts('json')) {
    res.send({ error: 'Not found' });
    return;
  }
  // default to plain-text. send()
  res.type('txt').send('Not found');
});
/*app.use(function(err, req, res, next){
  // we may use properties of the error object
  // here and next(err) appropriately, or if
  // we possibly recovered from the error, simply next().
  res.status(err.status || 500);
  res.render('errors/500.twig', { error: err });
});*/

//SOCKET IO =======================================================
//Quand on client se connecte, on le note dans la console
io.sockets.on('connection', function (socket) {
    console.log("New connection");
});

// LISTEN SERVER =======================================================
server.listen(80);

Any idea on how to solve this ?

Regards !

解决方案

I tried approach which I saw in the comments, and because it did not work for me, I am posting an answer that worked.

All .css files are static, so you have to serve them to the client. However, you do not serve static files as a express middleware. Therefor you have to add them.

app.use(express.static(__dirname, 'css'));

这篇关于Node.js公共css文件404找不到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！