Node.js环境下HTML加载本地SetData.js失败，求解决方法

你的Node.js服务器目前存在一个核心问题：不管浏览器发起什么请求（比如请求/SetData.js），它都会返回index.html的内容。当浏览器尝试加载本地的SetData.js时，服务器返回的是HTML代码而非JS代码，自然会触发加载错误。

我们需要让服务器能够根据请求的不同路径，返回对应的静态文件（比如JS、HTML），下面提供两种实用的实现方式：

方式一：用Node.js原生模块处理静态请求 #

修改你的start.js，解析请求URL、判断文件类型，返回对应文件并设置正确的响应头：

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

http.createServer(function (req, response) {
    // 确定请求的文件路径，默认返回index.html
    let filePath = '.' + req.url;
    if (filePath === './') {
        filePath = './index.html';
    }

    // 根据文件后缀匹配对应Content-Type
    const extname = String(path.extname(filePath)).toLowerCase();
    const contentTypeMap = {
        '.html': 'text/html',
        '.js': 'application/javascript',
        '.css': 'text/css'
    };
    const contentType = contentTypeMap[extname] || 'application/octet-stream';

    // 读取并返回目标文件
    fs.readFile(filePath, 'utf-8', function (err, data) {
        if (err) {
            // 文件不存在时返回404页面
            response.writeHead(404, { 'Content-Type': 'text/html' });
            response.write('<h1>404 Not Found</h1>');
            response.end();
            return;
        }
        response.writeHead(200, { 'Content-Type': contentType });
        response.write(data);
        response.end();
    });
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

方式二：使用Express框架（更简洁推荐） #

如果你的项目后续会涉及更多静态资源（CSS、图片等），使用Express框架会更高效，它内置了成熟的静态文件托管能力：

1. 首先安装Express依赖：

npm install express

2. 将start.js替换为以下内容：

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

// 托管当前目录下的所有静态文件
app.use(express.static(path.join(__dirname)));

// 访问根路径时返回index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(1337, '127.0.0.1', () => {
    console.log('Server running at http://127.0.0.1:1337/');
});

修改完成后，重启服务器：

node start.js

再访问http://127.0.0.1:1337/，打开浏览器控制台，就能看到SetData.js里的"Its me"日志输出了。

内容的提问来源于stack exchange，提问作者Haniku