reactjs - Vite, MSW och basename

Jag har konfigurerat Vite för att fungera med MSW för att avlyssna mina förfrågningar, hittills inga problem med detta. Filen mockServiceWorker.js finns i mappen public. Dock behövde jag lägga till en egenskap i min vite.config.ts som heter base:

vite.config.ts

export default defineConfig({
  base: '/kiosk',
  ...other configs...

Med detta lade jag också till den nödvändiga egenskapen i package.json:

package.json

"homepage": "/kiosk",
...other configs...

Detta har brutit MSW-funktionaliteten, och det fångar inte upp någon förfrågan.

Detta är vad jag för närvarande har i min MSW-initialiserare.

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: '/kiosk/mockServiceWorker.js'
  },
};

Och avlyssnar inga förfrågningar, samtidigt som följande meddelande visas i konsolen: `[MSW] Kan inte avlyssna förfrågningar på denna sida eftersom den ligger utanför workerens omfattning ("http://localhost:3000/kiosk/"). Om du vill mocka API-förfrågningar på denna sida måste du lösa detta omfattningsproblem.

• (Rekommenderas) Registrera arbetaren på rotnivå ("/") av din applikation.
• Ställ in svarshuvudet "Service-Worker-Allowed" för att tillåta arbetare utanför omfattningen.

Finns det några lösningar för att få MSW att fungera med basvägar? Tack på förhand!

Svar #1

Jag stötte också på detta problem med Vite och MSW, och körde detta:

npx msw init /

Verkade fixa det för mig.

Även om jag inte är helt nöjd med att filen mockServiceWorker.js ligger i mitt projektets rotkatalog.

Det finns en möjlighet att det kan fungera att lägga till rubriken 'Service-Worker-Allowed' till hanterarna.

https://mswjs.io/docs/recipes/custom-worker-script-location/#option-2-service-worker-allowed-response-header