mockServiceWorker.js can not be downloaded because of different origins

[joeldegerman99]

I have an issue where I can not download the mockServiceWorker.js file because the localhost port of the browser is not the same as the vite server I am running my vue app.

We are migrating from cshtml views to vue, but we are currently injecting the vite server to a base cshtml view rendered on parts of the application where our vue instance should be used. This is to keep the layout etc the same and only focus on the content.

The problem now occurs since the localhost port is not the same as the vite server (which is expected) but the issue with that is that msw then is trying to fetch the mockServiceWorker from the browser origin and not the vite server. Can I be explicit about which URL it should try to download it from?
Any ideas?

[kettanaito]

Hi, @joeldegerman99.

Yes, you can provide a custom worker script URL using the serviceWorker.url option on worker.listen():

worker.listen({
  serviceWorker: {
    url: 'http://localhost:<PORT>/mockServiceWorker.js'
  }
})

However, I believe having different ports will cause the fetch problem since Service Workers are meant to be served from the same host they are being registered for (this is your app's origin in the browser).

If you cannot serve the worker from the same origin as your client-side app, take a look at the Custom worker script location recipe that explains the ways to handle this.