React 15.1项目注册ServiceWorker时出现DOMException错误求助

这个错误的核心原因是：浏览器请求serviceworker.js时，服务器返回的是HTML内容（大概率是SPA路由 fallback 到的index.html页面），而非正确的JavaScript文件。ServiceWorker脚本必须以application/javascript的MIME类型返回，否则浏览器会拒绝注册。

以下是具体解决步骤：

• 确认文件位置正确性
  确保serviceworker.js文件放在对应http://localhost:3000/az24416/路径的物理根目录下，不能放在src或其他编译子目录里。比如你的项目部署根目录是az24416，那serviceworker.js要直接放在这个文件夹下，保证服务器能直接访问到。

• 调整服务器路由配置
  因为React是单页应用，很多服务器会把所有未匹配的路由都指向index.html，导致请求/az24416/serviceworker.js时返回了HTML页面。需要给服务器添加特殊规则，让这个请求直接返回对应的JS文件：

  • 若用Express服务器，添加路由规则：

    const path = require('path');
    app.get('/az24416/serviceworker.js', (req, res) => {
      res.sendFile(path.resolve(__dirname, 'public/serviceworker.js'), {
        headers: { 'Content-Type': 'application/javascript' }
      });
    });
    

  • 若用Apache服务器，在.htaccess中添加：

    RewriteRule ^az24416/serviceworker.js$ - [L]
    

• 确保服务器正确设置MIME类型
  检查服务器配置，保证.js文件的Content-Type被设置为application/javascript。比如Nginx配置：

  location ~* \.js$ {
    types { application/javascript js; }
  }
  

• 验证请求返回结果
  打开浏览器开发者工具的Network标签，刷新页面后查看serviceworker.js的请求：

  • 确认Response Headers里的Content-Type是application/javascript
  • 确认Response Body是你编写的ServiceWorker代码，而非HTML页面

另外可以优化你的注册代码，确保路径绝对正确：

export default function swDev(){
    const swUrl = `${window.location.origin}/az24416/serviceworker.js`;
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register(swUrl)
            .then((response) => {
                console.log('ServiceWorker注册成功:', response);
            })
            .catch((error) => {
                console.error('ServiceWorker注册失败:', error);
            });
    }
}

内容的提问来源于stack exchange，提问作者SHUBHAM RAUT