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

embedded/2025/3/28 8:49:23/

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)进一步排查路径或缓存问题。


http://www.ppmy.cn/embedded/174690.html

相关文章

stm32h743一个定时器实现秒和微妙延时

一、定时器溢出公式 Tout(溢出时间)(ARR1)(PSC1)/Tclk 二、确定定时器类型 三种定时器:基础定时器,通用定时器,高级定时器 STM32H743有众多的定时器,其中包括 2 个基本定时器( TIM6 和 TIM7…

INT202 Complexity of Algroithms 算法的复杂度 Pt.2 Search Algorithm 搜索算法

文章目录 1.树的数据结构1.1 有序数据(Ordered Data)1.1.1 有序字典(Ordered Dictonary)1.1.1.1 排序表(Sorted Tables) 1.2 二分查找(Binary Search)1.2.1 二分查找的时间复杂度 1.3 二叉搜索树&#xff0…

正则表达式:文本处理的瑞士军刀

正则表达式:文本处理的瑞士军刀 正则表达式(Regular Expression,简称 Regex)是一种用于匹配、查找和操作文本的强大工具。它通过定义一种特殊的字符串模式,可以快速地在文本中搜索、替换或提取符合特定规则的内容。正…

mysql中的游标是什么?作用是什么?

MySQL中的游标(Cursor)是一种用于在存储过程或函数中逐行处理查询结果集的数据库对象。它的作用类似于编程语言中的迭代器,允许遍历查询返回的多行数据,并对每一行执行特定操作。 游标的作用 逐行处理数据 当查询返回多行结果时&a…

使用Python在Word中创建、读取和删除列表 - 详解

目录 工具与设置 Python在Word中创建列表 使用默认样式创建有序(编号)列表 使用默认样式创建无序(项目符号)列表 创建多级列表 使用自定义样式创建列表 Python读取Word中的列表 Python从Word中删除列表 在Word中&#xff…

洛谷题目:P1018 [NOIP 2000 提高组] 乘积最大 题解

题目传送门: P1018 [NOIP 2000 提高组] 乘积最大 - 洛谷 (luogu.com.cn) 前言: 本题可以使用DP来解决。动态规划的核心思想是将一个复杂的问题分解为多个简单的子问题,并通过求解子问题的最优解来得到原问题的最优解。在本题中&#xff0c…

高频SQL50题 第一天 | 1757. 可回收且低脂的产品、584. 寻找用户推荐人、595. 大的国家、1683. 无效的推文、1148. 文章浏览 I

1757. 可回收且低脂的产品 题目链接:https://leetcode.cn/problems/recyclable-and-low-fat-products/description/?envTypestudy-plan-v2&envIdsql-free-50 状态:已完成 考点:无 select product_id from Products where low_fats Y a…

DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加导出数据功能

前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加导出数据功能📚页面效果📚指令输入�…