FastAPI渲染含module类型script的HTML时MIME类型错误求助

问题描述 #

Chrome控制台报错：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

原因是FastAPI返回的ES模块JS文件MIME类型为text/plain，不符合HTML规范对模块脚本的要求。

解决方法 #

方法一：自定义StaticFiles强制指定MIME类型 #

通过继承StaticFiles类，手动添加.js文件的正确MIME类型映射：

from fastapi.staticfiles import StaticFiles

class CustomStaticFiles(StaticFiles):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.content_type_mapping[".js"] = "application/javascript"

# 替换原有静态文件挂载代码
app.mount("/static", CustomStaticFiles(directory="static"), name="static")
app.mount("/main/assets", CustomStaticFiles(directory="static/assets"), name="static")

方法二：直接通过StaticFiles的content_types参数配置 #

FastAPI基于Starlette，StaticFiles支持通过content_types参数直接指定额外的MIME类型映射：

app.mount(
    "/static",
    StaticFiles(
        directory="static",
        content_types={".js": "application/javascript"}
    ),
    name="static"
)
app.mount(
    "/main/assets",
    StaticFiles(
        directory="static/assets",
        content_types={".js": "application/javascript"}
    ),
    name="static"
)

方法三：检查文件和路径正确性 #

• 确认目标JS文件扩展名是.js，没有被误命名为.txt或其他格式
• 验证static/assets目录下确实存在index-DIiKvbdV.js文件，HTML中引用的路径拼写无误

问题原因说明 #

FastAPI的StaticFiles默认依赖系统的MIME类型数据库，如果系统未正确将.js映射到application/javascript，就会返回text/plain类型。手动指定MIME类型可以强制覆盖系统默认配置，确保ES模块脚本能被浏览器正确识别。

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