当前位置: 首页 > news >正文

针对 pdf.mjs 文件因 MIME 类型错误导致的 Failed to load module script 问题解决方案

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.
pdf.mjs 这种问题该如何处理 nginx

针对 pdf.mjs 文件因 MIME 类型错误导致的 Failed to load module script 问题,以下是基于搜索结果的 Nginx 配置解决方案


1. 明确问题原因

错误的核心是 Nginx 未正确识别 .mjs 文件的 MIME 类型,导致返回 application/octet-stream,而浏览器要求 JavaScript 模块文件必须为 text/javascriptapplication/javascript


2. 配置 Nginx 的 MIME 类型

方案一:直接修改 Nginx 配置

在 Nginx 的 httpserverlocation 块中,通过 types 指令显式定义 .mjs 的 MIME 类型:

http {
    include       mime.types;  # 包含默认 MIME 类型配置(如已有可忽略)
    default_type  application/octet-stream;

    # 自定义 .mjs 的 MIME 类型
    types {
        text/javascript mjs;  # 关键:将 .mjs 映射到 text/javascript
    }
}
方案二:通过 location 块精准匹配

若需针对特定路径(如 /pdfjs/ 目录下的 .mjs 文件),可添加 location 规则:

location ~ \.mjs$ {  # 匹配所有以 .mjs 结尾的请求
    types { }         # 清空默认 MIME 类型继承
    default_type text/javascript;  # 强制指定 MIME 类型
    add_header Content-Type text/javascript;  # 可选,双重保险
}

3. 验证配置并重启 Nginx

  • 检查语法:执行 nginx -t 确认配置无语法错误。
  • 重启服务:运行 systemctl restart nginxnginx -s reload 使配置生效。
  • 浏览器验证:通过开发者工具的 Network 面板 检查 .mjs 文件的响应头 Content-Type 是否为 text/javascript

4. 补充说明

  1. .mjs.js 的区别
    .mjs 是 ECMAScript 模块(ESM)的专用扩展名,用于明确标识模块化 JavaScript 文件。若项目使用 ESM,需确保服务器正确识别此类型。

  2. 路径与权限问题

    • 检查 rootalias 路径是否指向包含 pdf.mjs 的正确目录。
    • 确保文件权限允许 Nginx 进程读取(如 chmod 644 pdf.mjs)。
  3. 默认 MIME 类型覆盖
    若全局配置了 default_type application/octet-stream,需通过上述方案覆盖 .mjs 的默认行为,避免冲突。


5. 参考配置示例

server {
    listen 80;
    server_name example.com;

    # 静态资源路径
    location / {
        root /usr/share/nginx/html;
        index index.html;

        # 处理 .mjs 文件
        location ~ \.mjs$ {
            types { }  # 清除继承的 MIME 类型
            default_type text/javascript;
        }
    }
}

通过以上配置,Nginx 将正确识别 .mjs 文件的 MIME 类型,解决模块加载错误。若问题仍存在,建议结合浏览器控制台和 Nginx 日志(error.log)进一步排查路径或缓存问题。

相关文章:

  • 【python】OpenCV—Hand Landmarks Detection
  • Siddon算法的公式和参数详细说明
  • 乐维网管平台核心功能解析(三)——告警关联资产
  • [vue]属性绑定
  • OceanBase 4.3.3 AP 解析:应用 RoaringBitmaps 类型处理海量数据的判重和基数统计
  • Word中公式自动标号带章节编号
  • 【设计模式】三十一、状态模式
  • 从投机到可持续发展:ETHDenver 2025 的关键启示!
  • OpenManus-RL 通过强化学习(RL)提升大型语言模型(LLM)代理的推理和决策能力
  • PowerShell 终端环境自动化配置
  • 【大语言模型_8】vllm启动的模型通过fastapi封装增加api-key验证
  • 物种分化在进化拓扑中的作用
  • 《深度学习》—— 模型部署
  • JAVA泛型的作用
  • RAGFlow爬虫组件使用及ragflow vs dify 组件设计对比
  • 深度学习篇---深度学习中的范数
  • 软考中级网络工程师第八章网络安全
  • 【react】工程项目中的通过自定义Hook进行路由设计以及路由鉴权
  • Python Django入门(创建应用程序)
  • Mysql表的简单操作
  • 昆明警方重拳打击经济领域违法犯罪:去年抓获905名嫌犯
  • 免签国+1,中乌(兹别克斯坦)互免签证协定6月生效
  • 陕西旱情实探:大型灌区农业供水有保障,大旱之年无旱象
  • 奥迪车加油时频繁“跳枪”维修两年未解决,4S店拒退换:可延长质保
  • 赖清德为“临阵脱逃”作准备,国台办:绝不会任“台独”祸首逍遥法外
  • 跨文化戏剧的拓荒者与传承者——洪深与复旦剧社的百年回响