初始化server.js后HTML无法调用外部JS文件函数的问题咨询

你当前编写的HTTP服务逻辑存在固定返回的问题：无论客户端请求什么路径（比如请求首页/，或者请求JS文件/scripts/test.js），服务端永远只会返回index.html的内容，且响应头的内容类型统一设置为text/html。
当浏览器加载完index.html之后，会自动解析页面内的<script src="scripts/test.js"></script>标签，向服务端发起获取JS文件的请求，此时服务端返回的仍然是HTML文本，浏览器尝试将HTML代码作为JS执行，自然会抛出语法错误，也找不到你定义的letMeCallYou函数。

你需要修改服务端逻辑，根据请求的路径返回对应的资源，并且设置正确的响应头。修改后的完整代码如下：

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

const PORT = 8080;

http.createServer(function (request, response) {
    // 解析请求路径
    let filePath = '.' + request.url;
    if (filePath === './') {
        filePath = './index.html';
    }

    // 获取请求文件的后缀名，设置对应的Content-Type
    const extname = String(path.extname(filePath)).toLowerCase();
    const contentType = {
        '.html': 'text/html',
        '.js': 'application/javascript',
        '.css': 'text/css'
    }[extname] || 'application/octet-stream';

    // 读取对应文件返回
    fs.readFile(filePath, function(error, content) {
        if (error) {
            // 文件不存在返回404
            response.writeHead(404);
            response.end('File not found');
        } else {
            // 返回正确的资源和响应头
            response.writeHead(200, { 'Content-Type': contentType });
            response.end(content, 'utf-8');
        }
    });
}).listen(PORT);

修改说明： #

• 不再预先读取index.html，而是每次收到请求后根据路径判断要返回的资源
• 自动识别请求的文件类型，设置对应的响应头，保证浏览器可以正确解析JS、CSS等资源
• 新增了404错误处理逻辑，资源不存在时会明确返回错误提示

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