求助：HTTPS生产服务器Service Worker加载失败，本地localhost正常

我之前也碰到过一模一样的情况——本地localhost跑起来顺风顺水，一部署到HTTPS生产服务器就直接报错。结合你给出的报错信息和.htaccess配置，问题核心是MIME类型不匹配，还可能和HTTPS重定向的细节有关，咱们一步步来搞定：

关键原因：Service Worker对MIME类型的严格要求 #

浏览器明确规定，Service Worker脚本必须返回application/javascript这个MIME类型，而你的服务器现在返回的是text/x-js，这直接违反了规范，所以浏览器拒绝加载它。另外ERR_INSECURE_RESPONSE可能是重定向过程中或者SSL证书的问题，咱们先解决最核心的MIME类型问题。

1. 修正.htaccess的MIME类型配置 #

在你的.htaccess文件里添加或修改MIME类型规则，确保.js文件返回正确的类型：

# 强制JavaScript文件使用标准MIME类型
AddType application/javascript .js

如果之前有设置过text/x-js相关的规则，一定要删掉或者覆盖它，避免规则冲突。

2. 完善HTTPS重定向配置 #

你提到已经配置了HTTP到HTTPS的重定向，可能配置不完整导致资源请求异常。把重定向规则补全成这样：

RewriteEngine On
# 当HTTPS未开启时，永久重定向到HTTPS地址
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

这里的[L,R=301]很关键：L表示这是最后一条规则，避免后续规则干扰；R=301是永久重定向，告诉浏览器以后直接访问HTTPS地址，减少不必要的请求跳转。

3. 确认Service Worker的注册路径正确 #

有时候部署后服务器的目录结构和本地不一样，注册Service Worker时路径写错了，会导致返回错误的资源（比如404页面，而页面的MIME类型肯定不是js）。检查你的注册代码：

// 确保路径匹配服务器上的实际位置，比如根目录下的service-worker.js
navigator.serviceWorker.register('/service-worker.js')

如果你的Service Worker放在子目录里（比如/assets/service-worker.js），就要对应修改路径。

4. 清除浏览器缓存 #

浏览器可能缓存了旧的MIME类型信息，即使你修改了服务器配置，它还是会用缓存的内容。打开浏览器开发者工具（F12），在Network面板勾选「Disable cache」，然后强制刷新页面（Ctrl+Shift+R），再测试Service Worker是否能正常加载。

5. 检查SSL证书有效性 #

ERR_INSECURE_RESPONSE这个错误也可能是SSL证书的问题：比如证书过期、域名不匹配、用了自签名证书（生产环境绝对不能用自签名的）。确保你的服务器使用的是正规CA颁发的有效证书，并且配置正确，否则浏览器会因为不信任连接而拒绝加载资源。

按照上面的步骤一步步排查，应该就能解决问题了。

内容的提问来源于stack exchange，提问作者Kim Schläpfer