CSS 和 JS 未加载到 Node.js 服务器上
[英]CSS and JS not loading on Node.js server
问题描述
I've just started to learn Node.js and I wrote the easiest server like this:
我刚刚开始学习 Node.js，我写了这样一个最简单的服务器：
// 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>
And the server:和服务器：
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'); }); })
My problem is that first time I run this code it worked fine - css and js loaded without problems.我的问题是我第一次运行这段代码时效果很好 - css 和 js 加载没有问题。 But later I was experimenting with PHP and Node.js on the same server at once (using nginx).但后来我同时在同一台服务器上试验 PHP 和 Node.js（使用 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).我失败了，因为我不需要太多（只是为了好玩）我放弃并更改了所有更改以实现此目标设置（例如 nginx-conf 中的端口）。 And then, after trying to run this code again, it doesn't load sheet1.css and main.js.然后，在尝试再次运行此代码后，它不会加载 sheet1.css 和 main.js。 Why is it so?为什么会这样？ I turned though all settings back to their default state?我把所有设置都恢复到默认状态了吗？
Thanks for your answer.感谢您的回答。
1 个解决方案
解决方案1
0 已采纳 2019-05-11 18:38:47
This is your server logic:这是您的服务器逻辑：
const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-type', 'text/html'); res.write(html); res.end(); });
The browser asks for / , the server gives it the value of the html variable.浏览器请求/ ，服务器给它html变量的值。
The browser asks for /sheet1.css , the server gives it the value of the html variable.浏览器请求/sheet1.css ，服务器给它html变量的值。
The browser asks for /main.js , the server gives it the value of the html variable.浏览器请求/main.js ，服务器给它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.需要注意req对象中的URL，给浏览器它要求的东西，而不是不管要求什么就盲目发送html 。
Note that you will also need to set the correct Content-Type response header.请注意，您还需要设置正确的Content-Type响应标头。
(You should probably also avoid reinventing the wheel and use Express.js and its static module which are designed for this). （您可能还应该避免重新发明轮子并使用专为此设计的Express.js及其静态模块）。
My problem is that first time I run this code it worked fine - css and js loaded without problems.
There is no way that could have happened.这不可能发生。 Possibly you loaded index.html from a file: URL and bypassed the server entirely.可能您从file: URL 加载了index.html并完全绕过了服务器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.