使用 nodejs 时，遇到了一个问题，求助大家

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 799 天前的主题，其中的信息可能已经有所发展或是发生改变。

node 版本：16.13.2

问题描述：

我在 server.js 中使用 fs.readFileSync 去读取一个 html 文件，然后用 response.end(html) 返回结果。

问题来了，如果 html 文件中 js 和 css 分别采用 <script> 标签和 <style> 标签引用，那么返回到页面的效果

正常；如果 js 和 css 都采用外部引入方式，那么样式和逻辑都不会被返回，这是为什么呢？

以下是 server.js 和 index.html

const http = require('http')
const fs = require('fs')

const server = http.createServer((req, res) => {
let { pathname } = new URL(req.url, 'http://127.0.0.1')
if (pathname === '/index.html') {
let html = fs.readFileSync('./page/index.html')
res.end(html)
}
})

server.listen(9000, () => {
console.log('server is runing......');
})

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
td {
padding: 20px 40px;
}

table tr:nth-child(odd) {
background-color: #aef;
}

table tr:nth-child(even) {
background-color: #fcb;
}

table,
td {
border-collapse: collapse;
}
</style>
</head>

<body>
<h1>你好呀 111</h1>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>

<script>
const tds = document.querySelectorAll('td')
tds.forEach(item => {
item.onclick = function () {
this.style.background = '#222'
}
})
</script>

</html>

这是正常的显示样式

而当我把 css 和 js 使用外部引入的方式就出问题了

点击×号取消后，是如下样子

14 条回复 • 2023-08-24 13:27:44 +08:00

HelloWorld556

2023-08-24 09:13:46 +08:00

是要设置 public 吗？我很少用 nodejs ，不知道对不对

powerN

2023-08-24 09:18:47 +08:00

你这两个文件是请求的 ./ 目录下的。对应 127.0.0.2:9000/css 127.0.0.2:9000/js
但是没看到你在 nodejs 中返回这两个文件。且一直 pending 的可能是不是因为你只判断了 pathname === '/index.html' 才 res.end()
其他的资源没有就不会 res.end.

gadfly3173

2023-08-24 09:19:18 +08:00 via Android

看起来像是浏览器不能访问到你的 css 和 js 文件，你看看你是不是没处理对其他文件的访问请求

zhangxh1023

2023-08-24 09:20:08 +08:00

比如：你引入了 `./js/index.js` ，那么浏览器会像你的当前网址的相对路径，请求资源 `index.js`,你可以在 network 里面看到请求的目标地址，应该是: `http://xxxx:9000/js/index.js`, 如果你的服务端没有返回对应的 js 文件，就不行了。

你应该搜索一下: web 静态资源服务器