MIME 类型 ('text/html') 的 Express 服务器问题
[英]Express Server issue with MIME type ('text/html')
问题描述
Just started Express server module in my school.
刚在我的学校启动 Express 服务器模块。 I have made a very simple website just to try it but it seems that the css file is not being executed (checked in chrome's terminal cl).我做了一个非常简单的网站只是为了尝试，但似乎没有执行 css 文件（在 chrome 的终端 cl 中检查）。
- Refused to apply style from 'http://localhost:3000/public/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.拒绝应用来自 'http://localhost:3000/public/style.css' 的样式，因为其 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。 home:26家：26
- GET http://localhost:3000/public/einstein-home.jpg 404 (Not Found) GET http://localhost:3000/public/einstein-home.jpg 404（未找到）
const express = require('express'); const app = express(); app.use(express.static('public')); app.get('/home', (request, response) => { console.log('dirname', __dirname); response.sendFile(__dirname + '/views/home.html') }); app.get('/about', (request, response) => { console.log('dirname', __dirname); response.sendFile(__dirname + '/views/about.html') }); app.get('/works', (request, response) => { console.log('dirname', __dirname); response.sendFile(__dirname + '/views/works.html') }); app.listen(3000, () => { console.log('Website about Einstein'); });
body { font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: #f2f2f2; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-style: normal; font-weight: 200; } .container { width: 90%; margin-left: auto; margin-right: auto; height: 600px; background-color: #FFFFFF; } header { width: 100%; height: 8%; background-color: #52bad5; border-bottom: 1px solid #2C9AB7; } nav { float: right; width: 50%; text-align: right; margin-right: 25px; } header nav ul { list-style: none; float: right; } nav ul li { float: left; color: #FFFFFF; font-size: 14px; text-align: left; margin-right: 25px; letter-spacing: 2px; font-weight: bold; transition: all 0.3s linear; } ul li a { color: #FFFFFF; text-decoration: none; } ul li:hover a { color: #2C9AB7; } .text { width: 90%; text-align: justify; font-weight: lighter; line-height: 25px; float: left; padding-left: 20px; padding-right: 20px; color: #A3A3A3; } .about { padding-left: 25px; padding-right: 25px; padding-top: 35px; display: inline-block; background-color: #FFFFFF; margin-top: 0px; } .foot { text-align: center; padding-top: 20px; padding-bottom: 20px; background-color: #717070; color: #FFFFFF; text-transform: uppercase; font-weight: lighter; letter-spacing: 2px; border-top-width: 2px; } .hidden { display: none; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="public/style.css"> <script src="http://use.edgefonts.net/source-sans-pro:n2:default.js"></script> </head> <body> <div class="container"> <header> <a href=""> </a> <nav> <ul> <li><a href="#hero">HOME</a></li> <li><a href="#about">ABOUT</a></li> <li> <a href="#work">WORK</a></li> </ul> </nav> </header> <img src="/public/einstein.jpg" width="auto" height="361" alt=""/> <section class="about" id="about"> <h2 class="hidden">About</h2> <p class="text">Welcome "Einsteiners". Feel free to find navigate in our website.</p> </section> <footer> <article class="footer_column"> </article> <article class="footer_column"> </article> </footer> <div class="foot">e=mc2</div> </div> </body> </html>
Can you please send me some feedback regarding this issue?你能就这个问题给我一些反馈吗？
Cheers!干杯!
1 个解决方案
解决方案1
0 已采纳 2020-11-03 00:18:49
I can strongly recommend not rolling your own templating: express comes with ejs built in, and if you need something more elaborate, adding better templating through pug or nunjucks are perfectly fine options.我强烈建议不要使用您自己的模板：快递自带ejs内置的，如果你需要的东西更复杂，增加更好的模板通过pug或nunjucks是完全没有问题的选项。 Rely on res.render() to generate your HTML files, don't use res.write or res.sendFile .依靠res.render()来生成你的 HTML 文件，不要使用res.write或res.sendFile 。
As for why things are not working properly, remember to read up on how static works : you tell Express which directories it needs to check for URL requests before moving on to the "real" routes, where -crucially- the name of the dir does not map to the URLs.至于为什么事情都不能正常工作，记得如何读了static作品：你告诉快递，它需要在移动到“真实”的路线，其中-crucially-迪尔的名字确实之前检查URL请求哪个目录不映射到 URL。
Ie if you have this:即如果你有这个：
app.use(express.static('public'))
app.use(express.static('files'))
then a request to yoursite.tld/css/cake.css will first check for css/cake.css inside public , then inside files , and then it'll fall through to whatever app.get routes might match if there is no path match.然后请求yoursite.tld/css/cake.css将首先检查css/cake.css内public ，那里面files ，然后它会通过落到任何app.get路线可能匹配，如果没有匹配的路径.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.