WebWorker使用importScripts时出现错误MIME类型问题求助

我之前也踩过这个坑！你遇到的这个错误：

Refused to execute script from 'http://localhost:8000/js/myModule.js' because its MIME type ('text/plain') is not executable.

本质是你的开发服务器没有为.js文件设置正确的MIME类型，浏览器把脚本识别成了普通文本（text/plain），而Web Workers要求加载的脚本必须是可执行的MIME类型（比如application/javascript）。

先确认：你的代码逻辑没问题 #

先把你的最简示例代码贴出来，方便对照——代码本身是正确的，问题不在代码逻辑：

main.js

const worker=new Worker("js/myWorker.js");
worker.postMessage();

myWorker.js

self.addEventListener('message', function(e) {
  importScripts('./myModule.js');
})

myModule.js

console.log("Hi from a module");

分场景给出解决方案 #

1. 本地开发：换个能正确识别MIME类型的服务器

如果你用的是Python自带的SimpleHTTPServer（Python2）或http.server（Python3），它偶尔会把.js文件的MIME类型设为text/plain。这时候推荐用Node.js的http-server工具：

• 全局安装：npm install -g http-server
• 进入项目根目录运行：http-server
• 访问默认地址http://localhost:8080，这时候.js文件会被正确识别为application/javascript，错误就能消失。

2. 自定义/生产服务器：手动配置MIME类型映射

如果用的是Apache、Nginx或自己写的服务器，需要手动配置.js文件的MIME类型：

• Apache：在项目根目录的.htaccess文件中添加：

  AddType application/javascript .js
  

• Nginx：在服务器配置的http或server块中添加：

  types {
      application/javascript js;
  }
  

• Node.js自定义服务器：返回.js文件时设置Content-Type头：

  const http = require('http');
  const fs = require('fs');
  const path = require('path');
  
  http.createServer((req, res) => {
    const filePath = path.join(__dirname, req.url);
    if (filePath.endsWith('.js')) {
      res.writeHead(200, { 'Content-Type': 'application/javascript' });
    }
    fs.createReadStream(filePath).pipe(res);
  }).listen(8000);
  

3. 可选：改用ES模块类型的Worker

如果你想使用更现代的ES模块语法（用import代替importScripts），可以创建模块类型的Worker：

// main.js中修改Worker创建方式
const worker = new Worker("js/myWorker.js", { type: 'module' });

然后在myWorker.js中直接用import：

import './myModule.js';

self.addEventListener('message', function(e) {
  // 你的业务逻辑
})

这种方式同样需要服务器正确设置.js的MIME类型，但写法更贴合现代前端开发习惯。

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