服务人员注册错误：不支持的MIME类型（'text / html'） [英] Service Worker registration error: Unsupported MIME type ('text/html')

问题描述

我正在将 create-react-app 与表达服务器。

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

create-react-app has a pre-configured ServiceWorker that caches local assets (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app).

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

The problem I encountered when I tried to publish on my server is that the service-worker.js file was available, but I was getting errors in my browser console when it tried to register it.

在Firefox上，出现了以下错误：

On Firefox, I got this error:

服务工作者注册期间的错误：

Error during service worker registration:

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

TypeError: ServiceWorker script at https://my-domain.com/service-worker.js for scope https://my-domain.com/ encountered an error during installation.

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

On Chrome, I get the more descriptive error:

错误在Service Worker注册期间：DOMException：无法注册ServiceWorker：脚本具有不受支持的MIME类型（'text / html'）。

Error during service worker registration: DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

确定好的，如果我在开发人员工具的网络选项卡中查找并搜索 service-worker.js 文件，我会发现它在HTTP中具有错误的MIME类型。头文件。

Sure enough, if I look in the Network tab of my developer tools and search for the service-worker.js file, I can see that it has the wrong MIME type in the HTTP headers.

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

I could not understand, though, why it has the wrong MIME type?

推荐答案

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

In my Express server application, I have one wildcard (asterisk / *) route that redirects to 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或其他某种纯文本文件。

This is a very common design pattern. However, it means that any requests for unknown text files initially get redirected to index.html, and therefore return with the MIME type of "text/html", even if it's actually a JavaScript or SVG or some other kind of plaintext file.

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

The solution I found was to add a specific route for service-worker.js before the wildcard route:

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类型返回它。

Now, when the browser looks for service-worker.js, Express will return it with the correct MIME type.

（请注意，如果您尝试添加 service-worker.js 通配符后的路由，该操作将无效，因为通配符路由将被覆盖。）

(Note that if you try adding the service-worker.js route after the wildcard, it won't work because the wildcard route will override.)

这篇关于服务人员注册错误：不支持的MIME类型（'text / html'）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！