微信内建浏览器不能正常加载 PDF.js 的解决方案

如下方案部署 PDF.js 的 Viewer 后,Firefox、Safari 可正常运行打开对应 PDF,但微信和 Chrome 不能打开。

<iframe
    src="./web/viewer.html?file=/menu.pdf"
    frameborder="0"
    style="height: 100vh; width: 100vw"
></iframe>

打开 Chrome 控制台,发现报错:

Failed to load module script: Expected a JavaScript-or-Wasm 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.

此为 Nginx 没有正确返回 .mjs 格式的 MIME 类型导致,而 Chrome 和微信内建浏览器严格检查了 MIME。编辑 /etc/nginx/mime.types,找到

application/javascript js;

修改为

application/javascript mjs js;

如果没有 mime.types,直接在 nginx.conf 编辑

http {
    # ...
    types {
        application/javascript  mjs js;
        # ...
    }
}

保存,重启 Nginx,强制刷新浏览器、清除微信缓存即可。

添加新评论