Node.js提供HTML时JS文件加载失败，MIME类型错误求助

嘿，这个问题我之前帮不少开发者解决过！你遇到的是Node.js服务器返回静态文件时MIME类型配置错误的问题——服务器把你的app.js脚本当成HTML文件返回了，浏览器的严格MIME检查自然就拒绝执行它啦。

通常出现这个问题的原因有两个：要么是你手动搭建的原生HTTP服务器没有正确设置不同文件的MIME类型，要么是静态文件的路径配置错误，导致服务器返回了404页面（而404页面是HTML，所以MIME类型是text/html）。下面给你两种常用的解决方案：

方案一：使用Express框架（推荐） #

Express会自动处理静态文件的MIME类型，省心又高效：

1. 先安装Express：

npm install express

2. 编写服务器代码（比如命名为server.js）：

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

// 托管assets目录下的所有静态文件，自动识别MIME类型
app.use('/assets', express.static(path.join(__dirname, 'assets')));

// 处理根路径的index.html请求
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

// 启动服务器
app.listen(3001, () => {
  console.log('服务器运行在 http://localhost:3001');
});

方案二：原生HTTP服务器（手动配置MIME） #

如果你不想用框架，需要手动根据文件后缀设置对应的MIME类型：

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

// 定义常见文件的MIME类型映射
const mimeTypes = {
  '.html': 'text/html',
  '.js': 'application/javascript',
  '.css': 'text/css',
  '.json': 'application/json',
  '.png': 'image/png',
  '.jpg': 'image/jpeg'
};

const server = http.createServer((req, res) => {
  // 确定请求的文件路径
  let filePath = '.' + req.url;
  if (filePath === './') {
    filePath = './index.html'; // 根路径返回index.html
  }

  // 获取文件后缀，匹配对应的MIME类型
  const extname = path.extname(filePath);
  const contentType = mimeTypes[extname] || 'application/octet-stream';

  // 读取并返回文件
  fs.readFile(filePath, (error, content) => {
    if (error) {
      if (error.code === 'ENOENT') {
        // 文件不存在时返回404页面
        res.writeHead(404, { 'Content-Type': 'text/html' });
        res.end('<h1>404 页面未找到</h1>', 'utf-8');
      } else {
        // 服务器内部错误
        res.writeHead(500);
        res.end(`服务器错误: ${error.code}`, 'utf-8');
      }
    } else {
      // 正确返回文件，设置对应的MIME类型
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content, 'utf-8');
    }
  });
});

server.listen(3001, () => {
  console.log('服务器运行在 http://localhost:3001');
});

最后检查项目结构 #

确保你的项目文件结构是这样的，避免路径错误：

你的项目文件夹/
├── server.js   # 上面写的服务器代码
├── index.html  # 你的HTML文件
└── assets/
    └── app.js  # 你的脚本文件

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