使用Workbox创建的Service Worker能否仅放行特定主机？

要解决Service Worker拦截反向代理重定向的问题，核心是绕过默认的路径白名单限制，直接基于请求主机控制导航拦截逻辑，具体步骤如下：

• 切换到injectManifest模式自定义Service Worker
  vite-plugin-pwa默认的generateSW模式自动生成SW，无法定制复杂的主机校验逻辑，需要改用injectManifest模式，自行编写SW代码：

  // vite.config.js
  import { VitePWA } from 'vite-plugin-pwa'
  
  export default {
    plugins: [
      VitePWA({
        injectManifest: {
          swSrc: './src/sw.js', // 指定自定义SW文件路径
        },
        // 保留你的其他PWA配置（如manifest、icons等）
      })
    ]
  }
  

• 在自定义SW中添加主机白名单逻辑
  在./src/sw.js中，针对导航请求做主机校验，放行反向代理域名的请求：

  import { precacheAndRoute } from 'workbox-precaching'
  
  // 处理vite-plugin-pwa自动注入的预缓存清单
  precacheAndRoute(self.__WB_MANIFEST)
  
  // 拦截导航请求，基于主机放行
  self.addEventListener('fetch', (event) => {
    const request = event.request
    // 仅处理页面导航类型的请求
    if (request.mode === 'navigate') {
      const targetUrl = new URL(request.url)
      // 替换为你的反向代理主机域名
      const allowedLoginHost = 'our.reverse-proxy.foo'
      
      if (targetUrl.host === allowedLoginHost) {
        // 放行该请求，不触发导航回退
        return
      }
  
      // 其他导航请求继续使用默认的回退逻辑
      event.respondWith(
        fetch(request).catch(() => caches.match('/index.html'))
      )
    }
  })
  

  这段代码会检查导航请求的目标主机，若是反向代理域名则直接放行，避免Service Worker触发导航回退，让用户正常进入登录流程。

这种“反向代理统一处理身份校验 + SPA结合PWA”的配置并不少见，是企业级应用的典型架构：反向代理负责鉴权、会话管理等公共逻辑，SPA专注业务，PWA提升离线体验。两者的冲突点在于Service Worker默认的导航拦截仅关注路径，未考虑跨主机重定向场景，所以需要通过自定义SW来适配。

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