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

【问题标题】：Refused to apply style from auth/css when rendering渲染时拒绝应用来自 auth/css 的样式
【发布时间】：2023-03-31 20:02:02
【问题描述】：

问题：

我很困惑为什么我的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.handlebars

<!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;

问题

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

【问题讨论】：

标签： html css node.js handlebars.js

【解决方案1】：

原因是您正在使用车把文件中的相对 URL 加载资产，这意味着资产是相对于页面的 URL 加载的，在您的情况下是 @987654321 @。要解决此问题，请改用绝对 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>

【讨论】：