服务人员注册错误：不支持的MIME类型（'text / html'）

Question

我使用的是创建反应的应用程序内有明确的服务器。

create-react- app有一个预先配置的ServiceWorker可以缓存本地资产（https://github.com/facebook/create-react-
app/blob/master/packages/react-scripts/template/README.md#making-a-
progressive-web -app

）。

尝试在服务器上发布时遇到的问题是service-worker.js文件可用，但是尝试注册文件时浏览器控制台出现错误。

在Firefox上，出现以下错误：

服务人员注册期间发生错误：

类型错误：在ServiceWorker脚本https://my-domain.com/service-worker.js的范围https://my-domain.com/安装过程中遇到错误。

在Chrome上，我得到了更具描述性的错误：

注册Service Worker时出错：DOMException：无法注册ServiceWorker：脚本具有不受支持的MIME类型（’text /
html’）。

果然，如果我在开发人员工具的“网络”选项卡中查找并搜索该service-worker.js文件，则可以看到该文件在HTTP标头中具有错误的MIME类型。

但是，我不明白为什么它的MIME类型错误？

Answer 1

在我的Express服务器应用程序中，我有一个通配符（星号/ *）路由重定向到index.html：

// Load React App
// Serve HTML file for production
if (env.name === "production") {
  app.get("*", function response(req, res) {
    res.sendFile(path.join(__dirname, "public", "index.html"));
  });
}

这是一种非常常见的设计模式。但是，这意味着对未知文本文件的所有请求最初都会重定向到index.html，因此返回MIME类型"text/html"，即使它实际上是JavaScript或SVG或其他某种纯文本文件。

我发现的解决方案是在通配符路由service-worker.js 之前 添加特定的路由：

app.get("/service-worker.js", (req, res) => {
  res.sendFile(path.resolve(__dirname, "public", "service-worker.js"));
});
app.get("*", function response(req, res) {
  res.sendFile(path.join(__dirname, "public", "index.html"));
});

现在，当浏览器查找时service-worker.js，Express将以正确的MIME类型返回它。

（请注意，如果您尝试service-worker.js在通配符后添加路由，则将无法使用，因为通配符路由将被覆盖。）