在Express中为静态JavaScript文件设置Content-Type（使用ES6模块）

当你在Express中使用ES6模块（通过<script type="module">引入）时，浏览器要求对应的JS文件必须返回正确的Content-Type头（通常是application/javascript），否则会拒绝加载模块。下面给你两种简单的解决方案，结合你的现有代码来调整：

方案一：自定义中间件手动设置Content-Type #

这种方法不需要额外安装依赖，直接在现有代码中添加一个中间件，专门处理JS文件的响应头：

const express = require('express');
const path = require('path'); // 记得补上这个导入，你原来的代码里用了path.join但没导入
const app = express();

// 先挂载静态文件中间件
app.use(express.static(__dirname + '/src'));

// 添加自定义中间件，为JS文件设置正确的Content-Type
app.use((req, res, next) => {
  if (req.path.endsWith('.js')) {
    res.setHeader('Content-Type', 'application/javascript');
  }
  next();
});

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(8080, () => console.log('Listening on port 8080!'));

这个中间件会拦截所有请求，检查路径是否以.js结尾，如果是就设置对应的Content-Type头，确保浏览器能正确识别为ES6模块。

方案二：修改全局MIME类型映射 #

如果你想让Express默认就给所有.js文件设置正确的类型，可以借助mime-types包来修改全局映射：

1. 先安装依赖：

npm install mime-types

2. 修改你的server.js：

const express = require('express');
const path = require('path');
const mime = require('mime-types');

// 重新定义.js文件的MIME类型
mime.define({
  'application/javascript': ['js']
});

const app = express();

app.use(express.static(__dirname + '/src'));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(8080, () => console.log('Listening on port 8080!'));

额外注意：脚本路径问题 #

看你index.html里的脚本标签写的是src="./src/test.js"，这里有个小坑：因为你已经把/src设为静态目录了，所以浏览器访问静态文件时，根路径/就对应src文件夹。正确的脚本路径应该是/test.js，否则当你访问单页应用的其他路由（比如/about）时，浏览器会尝试去找/about/src/test.js，导致404错误。修改后的脚本标签应该是：

<script type="module" src="/test.js"></script>

这样无论当前页面路由是什么，都会正确请求到src/test.js文件。

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