Node.js服务器返回的HTML中外部脚本未生效的问题解决

看起来你遇到的核心问题是Node.js服务器没有正确处理静态资源请求——直接打开HTML时，浏览器是从本地文件系统读取check.js，自然能正常加载；但通过服务器访问时，你的server.js没有对/check.js这个请求做出响应，导致浏览器拿不到脚本内容，页面也就显示不出预期的数字5了。

下面给你两种实用的解决方法，从简单易用的框架方案到原生实现都有：

方法一：用Express框架（推荐，更简洁高效） #

Express内置了专门处理静态资源的中间件，能帮你省去手动判断请求路径的麻烦：

1. 先安装Express依赖：

npm install express

2. 修改你的server.js代码：

const express = require('express');
const app = express();
const path = require('path');

// 配置静态资源目录，这里假设所有静态文件（js、css等）和server.js在同一目录
app.use(express.static(__dirname));

// 处理根路径请求，返回hieu.html页面
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'hieu.html'));
});

// 启动服务器，监听3000端口
app.listen(3000, () => {
  console.log('服务器已启动，访问地址：http://localhost:3000');
});

启动服务器后，浏览器请求/check.js时，Express会自动找到对应的文件并返回正确内容。

方法二：原生Node.js实现（适合理解底层原理） #

如果不想依赖框架，需要手动判断请求路径，读取对应文件并返回：

修改server.js代码如下：

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

const server = http.createServer((req, res) => {
  // 处理根路径，返回hieu.html
  if (req.url === '/') {
    fs.readFile(path.join(__dirname, 'hieu.html'), (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('加载HTML文件失败');
        return;
      }
      res.writeHead(200, { 'Content-Type': 'text/html' });
      res.end(data);
    });
  } 
  // 处理check.js的请求
  else if (req.url === '/check.js') {
    fs.readFile(path.join(__dirname, 'check.js'), (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('加载JS文件失败');
        return;
      }
      res.writeHead(200, { 'Content-Type': 'application/javascript' });
      res.end(data);
    });
  }
  // 其他未匹配路径返回404
  else {
    res.writeHead(404);
    res.end('页面不存在');
  }
});

server.listen(3000, () => {
  console.log('服务器已启动，访问地址：http://localhost:3000');
});

排查小技巧 #

• 打开浏览器开发者工具（按F12），切换到「网络」标签，刷新页面后查看check.js的请求状态：如果是404，说明服务器没处理这个路径；如果是200但内容不对，检查文件读取的路径是否正确。
• 确保check.js、hieu.html和server.js在同一个目录下，或者用path.join方法正确拼接文件路径，避免相对路径出错。

内容的提问来源于stack exchange，提问作者Đặng Minh Hiếu