与服务人员反应生产错误：无效的 MIME 类型

Posted 2023-02-24

【中文标题】与服务人员反应生产错误：无效的 MIME 类型

【英文标题】：React production error with service worker: invalid MIME type

【发布时间】：2018-12-02 02:26:55

【问题描述】：

我有一个可以在开发和生产中运行的 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 后端提供服务。包含React 应用程序的index.html 页面提供如下：

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

nginx 上是否有需要更改的内容？我猜不会，因为我有其他生产站点在 MIME 类型方面正常工作（但是它们都不是需要服务人员的 React 应用程序）。

【问题讨论】：

这个你搞定了吗？我也有同样的问题。

不幸的是我仍然不知道解决方案是什么。从那以后，我遇到了其他几个具有完全相同问题的案例。希望有人会在某个时候给出答案。

我们能看到你的 django 配置和 django 前面的其他东西，比如 nginx 吗？还可以尝试在您的浏览器中打开指向您的服务浏览器的链接。只需导航到该网址。是看到js文件还是看到index.html？

【参考方案1】：

从registrationService，我可以看到：

    export default function register() 
    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) 

        const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
        if (publicUrl.origin !== window.location.origin) 

        return;
        

        window.addEventListener('load', () => 
        const swUrl = `$process.env.PUBLIC_URL/service-worker.js`;

        if (isLocalhost) 

            checkValidServiceWorker(swUrl);
         else 

            registerValidSW(swUrl);
        
        );
    
    

当它的生产环境时，它会尝试注册到registerValidSW(swUrl);，其中swUrl 是<your domain>/service-worker.js（仅供参考，PUBLIC_URL 是从 package.json 的 homepage 值设置的）。但我猜这不是一个有效的路径，所以它从 Django 获得index.html。这可能就是您收到此错误的原因。

再次，基于猜测，我认为您可以执行以下解决方案：

从静态文件夹中提供service-worker.js（例如 url 可以是：/static/service-worker.js）。 registrationService.js 中的更新：$process.env.PUBLIC_URL/service-worker.js 到 $process.env.PUBLIC_URL/static/service-worker.js。

看看进展如何。如果您不想在生产中使用 registerService，还有另一种解决方案，只是不注册该服务（我不确定它是否推荐，但取决于您）

if (process.env.NODE_ENV != 'production') 
    registerServiceWorker();

【参考方案2】：

如果您注册了一些服务人员，就会发生这种情况。如果您打开 Chrome 开发者工具，您可能会遇到一些错误。 去

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

如果您在那里看到一些服务工作者已注册，那么您必须通过单击它来取消注册，然后刷新页面并检查。

【讨论】：

谢谢。我应该提到我试图取消注册它没有任何运气 - 错误只是再次出现。