Service Worker 注册错误:不支持的 MIME 类型 ('text/html') [英] Service Worker registration error: Unsupported MIME type ('text/html')
问题描述
我正在使用 create-react-app 和 express 服务器.
I'm using create-react-app with an express server.
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:
Service Worker 注册时出错:
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
before 通配符路由添加一个特定的路由:
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.)
这篇关于Service Worker 注册错误:不支持的 MIME 类型 ('text/html')的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!