Node.js HTTP服务器无法正确加载JS文件，报Uncaught SyntaxError: Unexpected token '<'错误

我刚遇到过几乎一模一样的问题，一眼就看出问题出在哪了！你的服务器现在不管客户端请求什么路径，都只会返回index.html的内容——包括浏览器请求./index.js的时候！

这就导致浏览器本来要加载JS文件，结果拿到的却是HTML代码，当它尝试把HTML当成JS解析时，第一个字符就是<，自然会抛出Unexpected token '<'的语法错误。

解决方法：修改服务器代码，根据请求路径返回对应文件 #

你需要在server.js里，根据req.url判断客户端要请求的是什么资源，然后返回对应的文件，还要设置正确的Content-Type：

exports.startServer = function() {
  const http = require('node:http');
  const fs = require('node:fs');
  const path = require('node:path'); // 用path模块处理文件路径更安全
  const port = 8000;

  const server = http.createServer((req, res) => {
    // 确定要加载的文件路径
    let filePath = '';
    if (req.url === '/' || req.url === '/index.html') {
      filePath = path.join(__dirname, './site/index.html');
      res.writeHead(200, { 'Content-Type': 'text/html' });
    } else if (req.url === '/index.js') {
      filePath = path.join(__dirname, './site/index.js');
      res.writeHead(200, { 'Content-Type': 'application/javascript' });
    } else {
      // 处理404情况
      res.writeHead(404, { 'Content-Type': 'text/plain' });
      res.end('404 Not Found');
      return;
    }

    // 读取并返回文件内容
    fs.readFile(filePath, 'utf8', (err, content) => {
      if (err) {
        res.writeHead(500, { 'Content-Type': 'text/plain' });
        res.end('Server Error');
        return;
      }
      res.end(content);
    });
  });

  server.listen(port, () => {
    console.log(`Server running on http://localhost:${port}`);
  });
};

关键改动说明： #

• 用req.url判断请求的资源：根路径或/index.html返回HTML，/index.js返回JS文件
• 给JS文件设置正确的Content-Type: application/javascript，让浏览器知道这是JS代码
• 用path.join()拼接路径，避免因为当前工作目录不同导致的文件找不到问题
• 增加了错误处理（文件读取失败、404情况），让服务器更健壮

额外提示 #

如果你的项目以后有更多静态资源（比如CSS、图片），手动判断每个路径会很麻烦，这时候可以考虑用Express框架的express.static中间件，它能自动处理所有静态文件的请求，会省心很多。不过现在先用原生HTTP的方案就能解决你的问题啦！

备注：内容来源于stack exchange，提问作者emarg