运行在localhost上的ServiceWorker能否拦截外部URL的fetch请求？

结论 #

你的判断完全正确，ServiceWorker确实无法满足你的跨域请求拦截需求。这是W3C规范的明确限制：运行在某个源下的ServiceWorker，仅能拦截同源的请求，你本地测试环境是localhost源，生产API是跨源域名，自然无法被拦截，和你的代码实现无关。

可行替代方案 #

针对Karma集成测试场景，推荐3种实现成本较低的解决方案：

• 方案1：使用Karma自带的代理功能
  直接在karma.conf.js中配置代理规则，将所有发往生产域名的请求转发到本地Mock地址，或者直接通过自定义中间件返回预设响应，不需要修改业务代码。配置示例：

  // karma.conf.js 配置片段
  module.exports = function(config) {
    config.set({
      // 其他原有配置保留
      proxies: {
        // 匹配所有发往生产域名的请求，代理到本地Mock路径
        'https://<productionServer>.com/': 'http://localhost:9876/mock/'
      },
      // 若不需要额外启动Mock服务，可搭配自定义中间件直接返回响应
      middleware: ['customMock'],
      plugins: [
        'karma-*',
        {
          'middleware:customMock': ['factory', function() {
            return function(req, res, next) {
              if (req.url === '/mock/image.php') {
                res.writeHead(200, { 'Content-Type': 'image/jpeg' })
                res.end(/* 你的Mock图片Buffer */)
                return
              }
              next()
            }
          }]
        }
      ]
    })
  }
  

• 方案2：全局劫持XHR/fetch请求
  引入专门用于测试场景的请求Mock工具，比如msw、sinon.js，在测试初始化阶段注册Mock规则，可直接拦截所有跨域请求并返回预设响应，不需要依赖ServiceWorker，也不需要修改业务代码。以msw为例，使用示例：

  // 测试入口文件配置
  import { setupWorker, rest } from 'msw'
  const worker = setupWorker(
    // 匹配生产环境的图片请求，返回Mock响应
    rest.get('https://<productionServer>.com/image.php', (req, res, ctx) => {
      return res(ctx.body(new Blob(['mock image data'])), ctx.status(200))
    })
  )
  // 所有测试运行前启动Mock服务
  before(async () => await worker.start({ quiet: true }))
  // 所有测试运行后关闭Mock服务
  after(() => worker.stop())
  

• 方案3：调整业务代码的API基础地址
  在测试环境下将所有API请求的基础地址修改为localhost同域路径，你现有编写的ServiceWorker代码就可以正常拦截这些请求，该方案需要修改业务侧的API地址配置逻辑，改造成本相对较高。

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