配置Vite base路径后MSW无法拦截请求的解决方法咨询

问题原因 #

当给Vite配置base: '/kiosk'后，MSW的Service Worker注册在/kiosk/mockServiceWorker.js，它的默认作用域被限制为/kiosk/。如果页面URL不在该路径下，或者需要拦截的API请求是根路径（如/api/xxx），就会触发作用域不匹配问题，导致无法拦截请求。

解决方案 #

方案1：将Service Worker注册在根路径（推荐） #

直接修改MSW初始化时的Service Worker地址为根路径，让其作用域覆盖整个网站：

import { StartOptions } from 'msw/browser';

export const enableMocking = async () => {
  if (!import.meta.env.DEV) return;

  const { worker } = await import('./browser');
  return worker.start(workerStartOptions);
};

const workerStartOptions: StartOptions = {
  serviceWorker: {
    url: '/mockServiceWorker.js' // 修改为根路径地址
  },
};

Vite的public目录下的资源默认支持根路径访问，开发和生产环境都能正常加载到mockServiceWorker.js。这种方式能让Service Worker拦截所有路径下的请求，彻底解决作用域问题。

方案2：添加Service-Worker-Allowed响应头 #

如果需要保持Service Worker在/kiosk/路径下，可通过Vite配置添加响应头，允许其作用域覆盖根路径：

1. 修改vite.config.ts，添加server.headers配置：

export default defineConfig({
  base: '/kiosk',
  server: {
    headers: {
      'Service-Worker-Allowed': '/' // 允许Service Worker作用域为根路径
    }
  },
  // ...其他配置
});

2. 保持MSW的初始化配置不变：

const workerStartOptions: StartOptions = {
  serviceWorker: {
    url: '/kiosk/mockServiceWorker.js'
  },
};

配置后，浏览器会允许该Service Worker拦截根路径下的所有请求，解决作用域不匹配问题。

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