渲染时拒绝应用来自 auth/css 的样式
Posted
技术标签:
【中文标题】渲染时拒绝应用来自 auth/css 的样式【英文标题】：Refused to apply style from auth/css when rendering 【发布时间】：2021-01-01 16:09:11 【问题描述】：问题：
我很困惑为什么我的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;
问题
如何消除错误 - 尝试呈现页面时？
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于渲染时拒绝应用来自 auth/css 的样式的主要内容，如果未能解决你的问题，请参考以下文章
如何在我自己的前端使用适当的样式表渲染来自 TinyMCE 的 HTML？
未处理的拒绝（错误）：渲染的钩子比上一次渲染时更多（React Interface GrandStack with ApolloClient）