Node服务运行的HTML页引入外部JS报Unexpected token '<'如何解决

报错原因 #

你当前编写的HTTP服务逻辑存在缺陷：不管浏览器发送什么路径的请求，服务端统一只返回main.html的文件内容。当浏览器解析HTML中的<script src="new_script.js">标签时，会主动向服务端请求/new_script.js路径，此时返回的仍是HTML代码，浏览器将<开头的HTML内容当作JS语法解析，自然就抛出了Uncaught SyntaxError: Unexpected token '<'错误。

解决方案 #

方案1：原生Node.js适配静态资源请求 #

无需引入额外依赖，直接修改index.js逻辑，根据请求路径返回对应文件、匹配正确的响应头：

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

// 配置不同文件后缀对应的Content-Type
const mimeMap = {
  '.html': 'text/html',
  '.js': 'text/javascript',
  '.css': 'text/css',
  '.json': 'application/json'
}

var server = http.createServer(function(req, resp){
  // 根路径默认返回main.html，其他路径匹配对应文件
  let filePath = req.url === '/' ? './main.html' : `.${req.url}`;
  let extname = path.extname(filePath);
  let contentType = mimeMap[extname] || 'application/octet-stream';

  fileSystem.readFile(filePath, function(error, fileContent){
    if(error){
      resp.writeHead(404, {'Content-Type': 'text/plain'});
      resp.end('404 Not Found');
    } else{
      resp.writeHead(200, {'Content-Type': contentType});
      resp.write(fileContent);
      resp.end();
    }
  });
});

server.listen(8080);
console.log('Listening at: localhost:8080');

方案2：使用Express框架简化配置（更推荐） #

如果项目允许引入第三方依赖，使用Express的静态资源中间件可以省掉手动编写路径判断、文件读取的逻辑：

• 先安装express依赖：
  npm install express
• 修改index.js代码如下：

const express = require('express');
const app = express();
const port = 8080;

// 将根目录下所有文件开放为静态资源，自动处理路径和响应头
app.use(express.static(__dirname));

app.listen(port, () => {
  console.log(`Listening at: localhost:${port}`);
});

以上两种方案修改后重启服务，即可正常加载new_script.js，控制台不会再报错。

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