MSW with axios does not work in Safari

[SEMIN-97]

Hi, I use to MSW with axios in react project.
I conducted a tutorial to use msw.
But I have problem 404 error in Safari, No problem in Chrome.
Please, I hope you can help me.

msw 2.0.14
axios 1.6.7

mocks/handlers.ts

import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/todos', () => {
    return HttpResponse.json({
      id: 1,
      text: 'test'
    });
  })
];

mocks/broswer.ts

import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = document.getElementById('root') as HTMLElement;

async function enableMocking() {
  const { worker } = await import('./mocks/browser');

  console.log(worker);
  return worker.start();
}

enableMocking().then(() => {
  ReactDOM.createRoot(root).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ToDoList.tsx

import { useEffect, useState } from 'react';
import axios from 'axios';

export default function ToDoList() {
  const fetchTodo = async () => {
    try {
      const res = await axios.get('/todos');
      console.log(res);
    } catch (e) {
      console.error('error', e);
    }
  };

  useEffect(() => {
    fetchTodo();
  }, []);

  return (
    <></>
  );
}

[kettanaito]

Hi, @SEMIN-97.

Whenever MSW doesn't intercept requests you think it should, follow the Debugging runbook. Once you do, post here how far you've got, with as much details as possible. Thanks.