You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

MSW在Vite环境下拦截静态资源引发异常的问题求助

MSW在Vite环境下拦截静态资源引发异常的问题求助

各位大佬好,我最近在Vite+React项目里用MSW做API Mock,遇到了一个头疼的问题:MSW总是会误拦截public下的静态图片请求,我按照官方指引用isCommonAssetRequest去过滤这类请求,但不仅没生效,还触发了奇怪的解析异常。

相关代码如下:

1. Mock Handlers 定义

import { type HttpHandler } from 'msw'
import boardHandlers from './board.handler'
import contributionHandlers from './contribution.handler'
import { recruitHandlers } from './recruit.handler'
import taskHandlers from './task.handler'

export const handlers: HttpHandler[] = [
  ...boardHandlers,
  ...taskHandlers,
  ...contributionHandlers,
  ...recruitHandlers,
]

2. 入口文件的MSW初始化逻辑

import { isCommonAssetRequest } from 'msw'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'

const enableMocking = async () => {
  if (!import.meta.env.DEV) {
    return
  }
  const { worker } = await import('../mocks/browser')
  return worker.start({
    onUnhandledRequest: (request) => {
      // 预期是如果是静态资源请求就跳过处理
      if (isCommonAssetRequest(request)) {
        return
      }
    },
  })
}

enableMocking()
  .then(() => {
    createRoot(document.getElementById('root')!).render(<App />)
  })
  .catch((err) => {
    console.error('MSW initialization failed', err)
  })

触发的错误日志

[MSW] Uncaught exception in the request handler for "GET http://localhost:5173/assets/images/logo.svg":
TypeError: Unexpected CLOSE at 47, expected END
    at mustConsume (http://localhost:5173/node_modules/.vite/deps/msw.js?v=c62e9274:187:11)
    at parse (http://localhost:5173/node_modules/.vite/deps/msw.js?v=c62e9274:263:5)
    at stringToRegexp (http://localhost:5173/node_modules/.vite/deps/msw.js?v=c62e9274:335:25)
    at pathToRegexp (http://localhost:5173/node_modules/.vite/deps/msw.js?v=c62e9274:396:10)
    at match (http://localhost:5173/node_modules/.vite/deps/msw.js?v=c62e9274:269:12)
    at matchRequestUrl (http://localhost:5173/node_modules/.vite/deps/msw.js?v=c62e9274:556:18)
    at HttpHandler.parse (http://localhost:5173/node_modules/.vite/deps/msw.js?v=c62e9274:875:37)
    at HttpHandler.run (...)

我原本以为isCommonAssetRequest会正确识别静态资源请求并让MSW跳过处理,但现在看来这个判断好像没起作用,MSW还是去处理了静态图片的请求,而且在解析的时候抛出了正则相关的错误。有没有大佬遇到过类似的问题?或者我的onUnhandledRequest配置哪里写得不对?求指点!

火山引擎 最新活动