Python本地服务器MIME类型错误求助：无法加载JS模块

我用Python搭建了一个服务器，用来提供引用多个JS和CSS文件的HTML页面，但一直碰到这个错误：

"Loading module from “http://localhost:9999/scripts/main.js” was blocked because of a disallowed MIME type (“”)."

我怀疑是Content-Type请求头的问题，但也可能有其他原因。下面是全部代码，希望能解决这个问题，同时帮我指出其他可能的错误（我是Web开发新手），谢谢！

涉及代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Feeds & Speeds</title>
  <link href="styles/style.css" rel="stylesheet">
</head>
<body>
  <div id="nav" class="navbar">
    <nav>
      <h2>Navigation</h2>
      <div id="FeedSpeed_button">
        <p>Feeds & Speeds</p>
      <div id="Material_button">
        <p>Materials</p>
        <P>Tool Library</P>
      </div>
    </nav>
  </div>
  <div id="content" class="content">
    <input type="button" id="but" value="click me">
  </div>

  <script type="module" src="scripts/main.js"></script>

</body>
</html>

Server.py #

from http.server import HTTPServer,BaseHTTPRequestHandler

HOST = "localhost"
PORT = 9999

class FeedSpeedServer(BaseHTTPRequestHandler):

    def do_GET(self):


        if self.path == "/":
            self.path = '/index.html'
        
        try:
            file = open(self.path[1:]).read()
            self.send_response(200)
        except:
            file = "file not found"
            self.send_response(404)

        #self.send_header("content-type", "text/html")
        #self.send_header("content-type", "text/javascript")
        #self.send_header("content-type", "text/css")
        self.end_headers()    
        self.wfile.write(bytes(file, 'utf-8'))

httpd = HTTPServer((HOST, PORT), FeedSpeedServer)
print("server running...")
httpd.serve_forever()
print("server Stopped")

Main.js #

import { FeedsSpeeds } from "./FeedsSpeeds"

let but = document.getElementById("but");

let navBar = document.getElementById("nav");
let feedSpeedsBut = navBar.getElementsByTagName("p")[0]
let materialsBut = navBar.getElementsByTagName("p")[1]
let toolBut = navBar.getElementsByTagName("p")[2]

feedSpeedsBut.addEventListener("click", function(){console.log("helloworld")});

materialsBut.addEventListener("click", function(){console.log("hello material world")});

toolBut.addEventListener("click", function(){console.log("hello tool world")});


//

function handlerEvent() {
  alert('hello');
  console.log("fired");
}

//but.onclick = () => alert("hellosies")
but.addEventListener("click", handlerEvent);
//but.removeEventListener("click", handlerEvent);

Page.js #

export class Page{
    constructor(){
        
    }
}

FeedsSpeeds.js #

import { Page } from "scripts/Page";

export class FeedsSpeeds extends Page {
    constructor(){

    }
}

1. 核心问题：缺失正确的Content-Type响应头 #

浏览器加载JS模块时，要求服务器返回application/javascript类型的Content-Type；加载CSS需要text/css，HTML需要text/html。你的服务器完全没设置这个头，导致浏览器拦截了JS模块加载。

修复后的Server.py代码（添加MIME类型映射和正确的头设置）：

from http.server import HTTPServer, BaseHTTPRequestHandler
import os

HOST = "localhost"
PORT = 9999

# 定义文件扩展名到MIME类型的映射
MIME_TYPES = {
    '.html': 'text/html',
    '.js': 'application/javascript',
    '.css': 'text/css',
    '.txt': 'text/plain'
}

class FeedSpeedServer(BaseHTTPRequestHandler):

    def do_GET(self):
        # 处理根路径，默认返回index.html
        if self.path == "/":
            self.path = '/index.html'
        
        file_path = self.path[1:]
        # 获取文件扩展名，匹配对应的MIME类型
        ext = os.path.splitext(file_path)[1]
        content_type = MIME_TYPES.get(ext, 'text/plain')

        try:
            # 打开文件时指定utf-8编码，避免乱码
            with open(file_path, 'r', encoding='utf-8') as f:
                file_content = f.read()
            self.send_response(200)
        except FileNotFoundError:
            file_content = "404 - 文件未找到"
            self.send_response(404)
            content_type = 'text/plain'
        except Exception as e:
            file_content = f"服务器错误: {str(e)}"
            self.send_response(500)
            content_type = 'text/plain'

        # 发送Content-Type头
        self.send_header("Content-Type", content_type)
        self.end_headers()    
        self.wfile.write(bytes(file_content, 'utf-8'))

httpd = HTTPServer((HOST, PORT), FeedSpeedServer)
print("服务器运行中...")
httpd.serve_forever()
print("服务器已停止")

2. HTML标签未闭合错误 #

你的HTML里有两个<div>标签没闭合，会导致页面结构混乱：

• <div id="FeedSpeed_button">需要在<p>Feeds & Speeds</p>后添加</div>
• <div id="Material_button">需要在<p>Tool Library</p>后添加</div>

同时把大写的<P>改成小写<p>，符合HTML规范。修复后的片段：

<div id="nav" class="navbar">
  <nav>
    <h2>Navigation</h2>
    <div id="FeedSpeed_button">
      <p>Feeds & Speeds</p>
    </div>
    <div id="Material_button">
      <p>Materials</p>
      <p>Tool Library</p>
    </div>
  </nav>
</div>

3. JavaScript模块导入路径错误 #

FeedsSpeeds.js里用了绝对路径"scripts/Page"，但当前文件在scripts目录下，应该用相对路径./Page。另外，继承类的构造函数必须调用super()，否则会报错。

修复后的FeedsSpeeds.js：

import { Page } from "./Page";

export class FeedsSpeeds extends Page {
    constructor(){
        super(); // 继承类必须调用父类构造函数
    }
}

4. 其他优化点 #

• 原服务器代码用except:捕获所有异常，改成明确捕获FileNotFoundError和其他异常，避免隐藏未知bug
• 打开文件时指定utf-8编码，适配不同操作系统的编码环境
• 可以给styles/style.css添加简单样式，测试CSS是否能正常加载，比如：

.navbar { background: #f0f0f0; padding: 10px; }
.content { margin: 20px; }

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