Flutter Web部署登录出现flutter_service_worker.js报错问题

已定位问题的根因复盘 #

• 登录接口返回OPTIONS 405的核心逻辑：浏览器跨域安全策略会自动对非简单请求先发OPTIONS预检请求，未配置CORS中间件时，chi路由仅匹配注册过的POST/GET等业务方法，没有对应OPTIONS方法的处理逻辑，直接返回405状态码；本地curl、Postman、桌面客户端这类非浏览器环境不会触发CORS预检规则，所以可以正常调通接口，添加CORS中间件后登录恢复正常是符合预期的。
• 前端日志持续出现flutter_service_worker.js请求记录本身不是错误，是Flutter Web默认启用PWA能力后的正常行为：Service Worker会在页面加载、接口请求、静态资源拉取时做缓存拦截、离线能力支持，只要该请求返回200、控制台无跨域/脚本报错就不属于异常，不需要PWA能力的话可以在构建阶段直接关闭。
• saveFile.js调用异常通常和三个问题相关：Service Worker缓存了错误版本的静态资源、静态服务MIME类型配置错误、CORS权限没有覆盖到静态资源路径，按后续步骤逐一排查即可彻底解决。

分步排查解决操作 #

第一步：校准chi框架CORS中间件配置，避免权限遗漏 #

不要手写零散的CORS响应头逻辑，直接使用chi官方维护的cors中间件包，注意CORS中间件必须放在所有业务路由、静态资源路由注册之前，参考配置如下：

import (
  "github.com/go-chi/chi/v5"
  "github.com/go-chi/chi/v5/middleware"
  "github.com/go-chi/cors"
)

func main() {
  r := chi.NewRouter()
  // 基础中间件
  r.Use(middleware.Logger)
  r.Use(middleware.Recoverer)
  // CORS配置
  r.Use(cors.Handler(cors.Options{
    AllowedOrigins:   []string{"https://你的前端部署域名", "http://你的前端部署域名"}, // 生产环境不要写*，开启AllowCredentials时*配置会直接失效
    AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"}, // 必须包含OPTIONS方法
    AllowedHeaders:   []string{"Accept", "Authorization", "Content-Type", "X-CSRF-Token", "X-Requested-With"},
    ExposedHeaders:   []string{"Content-Length", "Content-Disposition"}, // 文件下载场景必须暴露该头，否则前端JS读不到文件名会触发异常
    AllowCredentials: true,
    MaxAge:           300, // 预检请求缓存时间，减少重复OPTIONS请求
  }))

  // 后续注册业务路由、静态资源托管路由
}

注意：如果saveFile.js存放在前端静态资源目录、或是后端直接托管的静态路径下，CORS规则必须覆盖对应静态资源路径，不要只给/api前缀的业务接口加CORS。

第二步：处理flutter_service_worker.js相关日志问题 #

如果不需要PWA离线能力，直接在Flutter构建阶段关闭PWA支持，构建产物不会携带Service Worker相关逻辑，日志中自然不会出现对应请求记录，构建命令如下：

flutter build web --pwa-strategy none

如果需要保留PWA能力，检查前端静态服务（Nginx/自建文件服务）的配置，给flutter_service_worker.js配置正确的响应规则：

• 不要给该文件设置长缓存，配置响应头Cache-Control: no-cache
• MIME类型设置为application/javascript，如果错配为text/plain浏览器会直接拦截脚本执行
• 确保该文件的访问路径和Flutter构建时配置的<base href>一致，不要出现404

第三步：排查解决saveFile.js调用异常 #

按顺序检查以下配置项，覆盖绝大多数场景的异常：

1. 检查静态服务MIME类型配置：所有.js后缀文件必须返回Content-Type: application/javascript响应头，Nginx环境可以在对应静态资源配置块加include mime.types;确保类型映射正确，MIME配错时浏览器会拒绝执行JS脚本直接抛错。
2. 检查Service Worker缓存污染：第一次部署异常后浏览器会缓存错误版本的静态资源，先打开浏览器开发者工具->Application->Service Workers，点击Unregister注销旧的Service Worker，再勾选Bypass for network跳过缓存刷新页面，验证是否为缓存导致的问题。
3. 检查跨域加载权限：如果是通过跨域请求加载saveFile.js，要确保资源返回的响应头带Access-Control-Allow-Origin匹配当前前端域名。
4. 检查Flutter构建base href配置：如果构建时--base-href参数和实际部署的子路径不一致，会导致所有相对路径加载的JS文件404；部署在站点根路径就配--base-href /，部署在子路径比如/app/就配对应子路径，结尾必须带斜杠。

第四步：全链路验证配置有效性 #

所有配置修改完成后，按以下步骤验证：

1. 打开浏览器开发者工具，切到Network面板，勾选Disable cache，按Ctrl+Shift+R硬刷新页面
2. 检查登录流程：OPTIONS预检请求返回204/200，后续POST登录请求返回200，正常完成登录跳转
3. 检查静态资源加载：flutter_service_worker.js、saveFile.js均返回200，响应头Content-Type正确，控制台无CORS、JS执行报错
4. 测试文件保存功能：触发saveFile逻辑，无控制台报错，文件可正常下载保存
5. 重启后端、前端静态服务，重复上述步骤验证，确认无偶发异常

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