ServiceWorker doesn't catch routes in Firefox only

Describe the bug

MSW properly mock routes in Chrome and Safari, but doesn’t in Firefox.

Environment

• msw: 0.19.3
• nodejs: 12.14.0
• npm: 6.14.2
• firefox: 77.0.1

To Reproduce

Here’s my mocks.js file:

import { setupWorker, rest } from 'msw';

const worker = setupWorker(
  rest.get('http://localhost:3000/api/user/:id/', (req, res, ctx) => {
    const { id } = req.params;

    return res(
      ctx.status(202, 'Mocked'),
      ctx.json({
        id: id,
      })
    );
  })
);

worker.start();

The request is made with Axios within a Vue.js generated with Vue CLI and using TypeScript. It basically looks like this:

this.axios.defaults.baseURL = 'http://localhost:3000/api';
this.axios.defaults.headers.common['Accept'] = 'application/json';
// ...
this.axios.get(`/user/${id}`);

I tried to put some logs in the ServiceWorker and it seems to not catch this request at all while seeing others such as assets.

I’m testing in HTTP but I have checked the parameter to enable SW in HTTP in the devtools. I have also cleared the SW after every change in about:debugging to be sure it was up-to-date.

Expected behavior

The request should be mocked in Firefox just like it does in Chrome and Safari.

Screenshots

Firefox console:

Chrome console:

[LeBenLeBen]

I was able to make Firefox mock the request by running fetch('http://localhost:3000/api/user/1') directly in the browser console.

I checked both requests to find differences, and basically the one that fails is an XMLHttpRequest whereas the one that works is done with Fetch.

This leaded me to find that XHR within SW are not supported in Firefox apparently, which match with my logs not outputting the XHR request at all from the SW.

I guess we’ll have to either use Fetch or Chrome then 😅

[LeBenLeBen]

@Thane2376 It’s a browser limitation, no workaround is possible, you should either use Fetch or another browser.