渲染时拒绝应用来自 auth/css 的样式

Question

问题：

我很困惑为什么我的 render 没有从 uploads.

加载我的 css 和 images

当我不尝试登录时，每个页面加载它的images并且css应用它的样式..

但是当我尝试像这样呈现我的页面时：

if(!results.length){
  res.status(401).render('home/login', {
    message: 'The email or password is incorrect'
  });
}

我得到这个错误:

我意识到它说 ...:3000/auth/css/.. - 它不应该加载 auth?

这是我的树：

Index.js
|
├───controllers
├───helpers
│
├───public
│   ├───css
│   ├───javascript
│   └───uploads
├───routes
│   └───home
└───views
    ├───home
    ├───layouts
    └───partials
        └───home

index.js

const express = require('express');
const path = require('path');
const exphbs = require('express-handlebars');
const bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');

const app = express();

// Public path
app.use(express.static(path.join(__dirname, './public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

//Parse URL encoded bodies
app.use(express.urlencoded({ extended: false }));
//Parse JSON bodies as sent by API clients
app.use(express.json());
app.use(cookieParser());

// View engine
app.engine('handlebars', exphbs({defaultLayout: 'home-index'}));
app.set('view engine', 'handlebars');

// Routing
app.use('/', require('./routes/home/page_routes'));
app.use('/auth', require('./routes/auth'));


app.listen(3000, () => {
    console.log('Listening');
  });

views/layouts/home-index.车把

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/home.css">
    <title></title>
  </head>
  <body>
    {{> home/home-nav}}

    {{{body}}}



  </body>
</html>

routes/auth.js

const { db } = require('./db');
var jwt = require('jsonwebtoken');
var bcrypt = require('bcryptjs');
var { promisify } = require('util');


// Login
exports.login = async function(req, res) {
    try {
      var {email, password} = req.body;
  
      if(!email || !password) {
        return res.status(400).render('home/login', {
          message: 'Please provide an email and password' ///////////////// This is the problem
        });
      }
  
      db.query('select * from users_website where email = ?', [email], async function(error, results){
        console.log(results)
  
        if(!results.length){
          res.status(401).render('home/login', {
            message: 'The email or password is incorrect' ///////////////// This is the problem
          });
        }
        else{
          var id = results[0].id;
          var token = jwt.sign({ id }, 'SuperSecretPassword9981998', {
            expiresIn: '90d'
          });
  
          console.log("The token is: " + token);
  
          var cookieOptions = {
            expires: new Date(
              Date.now() + 90 * 24 * 60 * 60 * 1000
            ),
            httpOnly: true
          }
  
          res.cookie('jwt', token, cookieOptions);
          res.status(200).redirect("/");
        }
      });
  
    } catch (e) {
      console.log(e);
    }
  }

routes/home/page_routes

const express = require('express');
const router = express.Router();
const auth_controller = require('../../controllers/auth');

// Home router
router.get('/', auth_controller.isLoggedIn, (req, res) => {
    res.render('home/index');
});

// Login
router.get('/login', (req, res) => {
    res.render('home/login');
});

module.exports = router;

问题

如何消除错误 - 尝试呈现页面时？

Answer 1

原因是您在 handlebars 文件中使用 relative URL 加载资产，这意味着资产是相对于页面的 URL，在您的情况下，它是 :3000/auth。要解决此问题，请改用 absolute URL。

像这样：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Notice the leading slash. -->
    <link rel="stylesheet" href="/css/home.css">
    <title></title>
  </head>
  <body>
    {{> home/home-nav}}

    {{{body}}}



  </body>
</html>

渲染时拒绝应用来自 auth/css 的样式

Refused to apply style from auth/css when rendering

html

css

node.js

handlebars.js