OpenResty/Nginx 静态资源 MIME 类型错误

部署问题
问题现象
运行环境:1panel + OpenResty 运行 Hexo + hexo-theme-redefine + Waline
问题现象:Hexo本地运行评论模块正常,但是部署到服务器之后,评论部分仅剩标题
报错信息
当浏览器加载 .mjs
、.js
或其他静态资源时,控制台出现以下错误:
1 | Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". |
或
1 | The server responded with a non-JavaScript MIME type of "text/plain". |
问题原因
服务器未正确配置 MIME 类型,导致:
.mjs
或.js
文件被识别为application/octet-stream
或text/plain
。- 浏览器因安全策略拒绝执行模块脚本。
排查步骤
1. 检查 OpenResty/Nginx 的 MIME 类型配置
配置文件位置:nginx.conf
或站点配置文件。
尝试添加关键配置项:
1 | # 新增 MIME 类型配置 ---------------------------------------- |
1 | nginx -t # 检查配置语法是否正确 |
2. 浏览器开发者工具排查
- 打开浏览器开发者工具(F12)➔ Network 面板。
- 刷新页面,找到报错的
.mjs
文件请求。 - 检查以下字段:
- Status Code:应为
200
(成功)或304
(缓存)。 - Content-Type:应为
application/javascript
。 - Response Headers:无
X-Content-Type-Options: nosniff
(可能阻止 MIME 嗅探)。
- Status Code:应为
3. 缓存问题处理
- 服务端缓存:
确保 OpenResty/Nginx 未开启静态资源缓存(检查配置中是否有proxy_cache
或expires
)。 - 浏览器缓存:
按Ctrl + Shift + R
强制刷新页面。
附录:完整配置示例
修改nginx.conf文件
1 | http { |
修改OpenResty 站点配置文件
1 | server { |
- 标题: OpenResty/Nginx 静态资源 MIME 类型错误
- 作者: Teacat99
- 创建于 : 2025-02-19 08:58:35
- 更新于 : 2025-04-13 15:18:35
- 链接: https://www.teacat99.com/2025/02/19/OpenResty-Nginx-静态资源-MIME-类型错误/
- 版权声明: 版权所有 © Teacat99,禁止转载。
评论