与服务工作者的生成错误:MIME类型无效

Question

我有一个在开发和生产中工作的React应用程序,但是在生产中我在控制台中收到以下错误:

The script has an unsupported MIME type ('text/html').
Failed to load resource: net::ERR_INSECURE_RESPONSE
registerServiceWorker.js:80 Error during service worker registration: 
DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

只有在生产环境中才会在开发中发生错误.该应用程序仍然可以在生产中正常工作,但我仍然希望解决错误.

在进行一些挖掘后,似乎在生产中,service-worker.js文件是从原始index.html文件请求的,而MIME类型为text/html,service-worker.js因此该文件没有正确的MIME类型application/javascript.

不幸的是,尽管我认为我明白这个问题是什么,但我还是无法修复它.

生产构建是使用后端创建的create-react-app,并由Django后端提供.index.html包含React应用程序的页面提供如下:

re_path('.*', TemplateView.as_view(template_name='index.html'))

是否有Nginx需要改变的东西？我猜不会因为我有其他生产网站在MIME类型方面正常工作(但是它们都不是React需要服务工作者的应用程序).

Answer 1

如果您注册了一些 Service Worker，就会发生这种情况。如果您打开 Chrome 开发者工具，您可能会收到一些错误。去

Chrome 开发工具 -> 应用程序 -> Service Worker

在那里，如果您看到某个 Service Worker 已注册，那么您必须通过单击它来取消注册它，然后刷新页面并检查。