如何阻止MSW显示未处理请求警告并配置其仅拦截指定路径请求？

1. 如何阻止MSW显示关于未处理请求的警告？ #

有两种常用解决方式：

• 静默模式关闭警告
  初始化setupWorker或setupServer时，添加quiet: true配置，直接屏蔽所有未处理请求的警告：

// 浏览器环境
import { setupWorker } from 'msw'
import { handlers } from './handlers'

const worker = setupWorker(...handlers)
worker.start({ quiet: true })

// Node.js/测试环境
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

const server = setupServer(...handlers)
server.listen({ quiet: true })

• 添加兜底请求处理器
  如果不想完全关闭警告，可添加匹配所有请求的兜底处理器，让未被拦截的请求正常转发：

import { rest } from 'msw'

const fallbackHandler = rest.all('*', (req, res, ctx) => {
  return res.passThrough()
})

// 将该处理器加入setupWorker/setupServer的参数列表

2. 是否可以配置MSW仅拦截符合特定路径规则的请求？ #

完全可以，推荐两种配置方式：

• 在处理器中指定匹配路径
  定义处理器时，用正则表达式匹配/api开头的路径：

import { rest } from 'msw'

const apiHandlers = [
  rest.get(/^\/api\/.*/, (req, res, ctx) => {
    return res(ctx.json({ data: 'mock data' }))
  }),
  rest.post(/^\/api\/.*/, (req, res, ctx) => {
    // 处理/api开头的POST请求
  })
]

• 启动Worker时设置过滤规则
  在worker.start()的配置中，通过serviceWorker.filter指定仅拦截/api开头的请求，页面切换的路由请求（通常非/api路径）就不会被MSW处理，也就不会触发警告：

const worker = setupWorker(...apiHandlers)
worker.start({
  serviceWorker: {
    filter: (url) => url.pathname.startsWith('/api')
  }
})

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