CSS和JS未在Node.js服务器上加载 [英] CSS and JS not loading on Node.js server
问题描述
我刚刚开始学习Node.js，并且我这样编写了最简单的服务器:
I've just started to learn Node.js and I wrote the easiest server like this:
// workspace
const p = document.querySelector('p');
p.textContent = 'aleluja';
html {
font-size: 10px;
}
body {
font-size: 2rem;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Go go go</title>
<link href="sheet1.css" rel="stylesheet">
<script src="main.js" async></script>
</head>
<body>
<p>something</p>
</body>
</html>
和服务器:
const http = require('http');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
fs.readFile('index.html', (err, html) => {
if (err) {
throw err;
}
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-type', 'text/html');
res.write(html);
res.end();
});
server.listen(port, hostname, () => {
console.log('started');
});
})
我的问题是，第一次运行此代码时，它运行良好-CSS和js加载没有问题.但是后来我又在同一台服务器上(使用nginx)尝试了PHP和Node.js.我失败了，因为我不需要太多(这只是为了好玩)，所以我放弃并更改了所有更改以实现此目标设置(例如nginx-conf中的端口).然后，在尝试再次运行此代码后，它不会加载sheet1.css和main.js.为什么会这样呢?我是否将所有设置恢复为默认状态?
My problem is that first time I run this code it worked fine - css and js loaded without problems. But later I was experimenting with PHP and Node.js on the same server at once (using nginx). I failed and because I didn't need it too much (it was just for fun) I gived up and changed all changed to achieve this goal settings (like ports in nginx-conf). And then, after trying to run this code again, it doesn't load sheet1.css and main.js. Why is it so? I turned though all settings back to their default state?
感谢您的回答.
推荐答案
这是您的服务器逻辑:
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-type', 'text/html');
res.write(html);
res.end();
});
浏览器要求输入/，服务器会为其提供html变量的值.
The browser asks for /, the server gives it the value of the html variable.
浏览器要求输入/sheet1.css，服务器会为其提供html变量的值.
The browser asks for /sheet1.css, the server gives it the value of the html variable.
浏览器要求输入/main.js，服务器会为其提供html变量的值.
The browser asks for /main.js, the server gives it the value of the html variable.
您需要注意req对象中的URL，并向浏览器提供其要求的内容，而不是盲目发送html无论如何要求.
You need to pay attention to the URL in the req object and give the browser what it asks for instead of blindly sending html no matter what is asked for.
请注意，您还需要设置正确的Content-Type响应标头.
Note that you will also need to set the correct Content-Type response header.
(您可能还应该避免重新发明轮子，并使用 Express.js 及其
(You should probably also avoid reinventing the wheel and use Express.js and its static module which are designed for this).
我的问题是，第一次运行此代码时，它运行良好-CSS和js加载没有问题.
My problem is that first time I run this code it worked fine - css and js loaded without problems.
不可能发生.可能是您从file: URL加载了index.html并完全绕开了服务器.
There is no way that could have happened. Possibly you loaded index.html from a file: URL and bypassed the server entirely.
这篇关于CSS和JS未在Node.js服务器上加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
