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

Teacat99 Lv1

部署问题

问题现象

运行环境: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 类型,导致:

  1. .mjs.js 文件被识别为 application/octet-streamtext/plain
  2. 浏览器因安全策略拒绝执行模块脚本。

排查步骤


1. 检查 OpenResty/Nginx 的 MIME 类型配置

配置文件位置nginx.conf 或站点配置文件。

尝试添加关键配置项

1
2
3
4
5
6
7
8
# 新增 MIME 类型配置 ----------------------------------------
types {
application/javascript mjs; # 添加 .mjs 的 MIME 类型
application/wasm wasm; # 可选:如果需要支持 WebAssembly
}
include mime.types; # 确保包含默认 MIME 类型
default_type application/octet-stream;
# -----------------------------------------------------------
1
2
nginx -t  # 检查配置语法是否正确
nginx -s reload # 重启 Nginx,或直接重启OpenResty容器

2. 浏览器开发者工具排查

  1. 打开浏览器开发者工具(F12)➔ Network 面板。
  2. 刷新页面,找到报错的 .mjs 文件请求。
  3. 检查以下字段:
    • Status Code:应为 200(成功)或 304(缓存)。
    • Content-Type:应为 application/javascript
    • Response Headers:无 X-Content-Type-Options: nosniff(可能阻止 MIME 嗅探)。

3. 缓存问题处理

  1. 服务端缓存
    确保 OpenResty/Nginx 未开启静态资源缓存(检查配置中是否有 proxy_cacheexpires)。
  2. 浏览器缓存
    Ctrl + Shift + R 强制刷新页面。

附录:完整配置示例

修改nginx.conf文件

1
2
3
4
5
6
7
8
http {
# 新增 MIME 类型配置 ----------------------------------------
types {
application/javascript mjs; # 添加 .mjs 的 MIME 类型
application/wasm wasm; # 可选:如果需要支持 WebAssembly
}
include mime.types; # 确保包含默认 MIME 类型
default_type application/octet-stream;

修改OpenResty 站点配置文件

1
2
3
4
5
6
7
8
9
server {
# 新增 MIME 类型配置 ----------------------------------------
types {
application/javascript mjs; # 添加 .mjs 的 MIME 类型
application/wasm wasm; # 可选:如果需要支持 WebAssembly
}
include mime.types; # 确保包含默认 MIME 类型
default_type application/octet-stream;
# -----------------------------------------------------------
  • 标题: 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,禁止转载。
评论
目录
OpenResty/Nginx 静态资源 MIME 类型错误