Flutter Web集成Supabase重置密码时ServiceWorker MIME类型错误

核心本质 #

这个错误的根源是：浏览器尝试在https://eisgd.com/update-password/路径下注册Service Worker时，请求的flutter_service_worker.js文件实际返回的是HTML页面（MIME类型为text/html），而非合法的JavaScript文件（应返回application/javascript）。

具体可能原因及解决方法 #

• Flutter路由与Supabase重置路径冲突
  Flutter Web默认是单页应用，所有路由请求会被重定向到index.html。用户点击重置密码链接进入/update-password/路径后，页面尝试加载该路径下的flutter_service_worker.js，但服务器找不到对应文件，直接返回了index.html，导致MIME类型不匹配。
  解决：

  1. 在Supabase控制台的「认证」-「URL配置」中，将重置密码回调URL设置为独立于Flutter主应用的路径（比如https://eisgd.com/auth/reset-password），避免和Flutter路由范围重叠。
  2. 调整Flutter Web的部署重写规则，让/update-password/路径下的请求不转发到index.html，直接返回对应的重置密码处理页面。

• Service Worker作用范围配置不合理
  Flutter Web的Service Worker默认作用范围是根路径/，会尝试在/update-password/这类子路径下注册，但该路径并非Flutter应用的一部分，不存在对应的flutter_service_worker.js文件。
  解决：
  修改web/manifest.json中的scope字段，将Service Worker的作用范围限制在Flutter应用的主路径（比如/app/），避免在认证相关路径触发注册。

• 服务器静态资源MIME类型配置错误
  部分服务器未正确配置.js文件的MIME类型，或者请求不存在的.js文件时，错误返回HTML页面而非404。
  解决：
  检查服务器配置（Nginx、Apache或托管平台设置），确保：

  1. .js文件的MIME类型被正确设置为application/javascript。
  2. 非Flutter应用路径下的静态资源请求，返回404而非index.html。

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