时间戳

首页 > 解决方案 > CSS 和 JS 未在 Node.js 服务器上加载

javascript - CSS 和 JS 未在 Node.js 服务器上加载

问题描述

我刚刚开始学习 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>

和服务器：

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 加载没有问题。但后来我在同一台服务器上同时试验了 PHP 和 Node.js（使用 nginx）。我失败了，因为我不太需要它（这只是为了好玩）我放弃并更改了所有更改以实现此目标设置（如 nginx-conf 中的端口）。然后，在尝试再次运行此代码后，它不会加载 sheet1.css 和 main.js。为什么会这样？我把所有设置都转回了默认状态？

感谢您的回答。

标签： javascriptnode.js

解决方案

这是您的服务器逻辑：

   const server = http.createServer((req, res) => {
     res.statusCode = 200;
     res.setHeader('Content-type', 'text/html');
     res.write(html);
     res.end();
   });

浏览器要求/，服务器给它html变量的值。

浏览器要求/sheet1.css，服务器给它html变量的值。

浏览器要求/main.js，服务器给它html变量的值。

您需要注意req对象中的 URL 并将其要求的内容提供给浏览器，而不是盲目地发送html无论要求什么。

请注意，您还需要设置正确的Content-Type响应标头。

（您可能还应该避免重新发明轮子并使用Express.js及其为此设计的静态模块）。

我的问题是我第一次运行此代码时运行良好 - css 和 js 加载没有问题。

这不可能发生。index.html可能您从URL加载file:并完全绕过服务器。

推荐阅读