Необработанное отклонение (SecurityError): операция небезопасна. В новом проекте create-react-app

Question

Я создал новый проект с приложением create-response-app, затем запустил npm start, и это появилось. https://imgur.com/a/3By9NCr

Использование FF 69.0.3

Answer 1

Эта проблема, похоже, возникает только в Firefox. Edge работал нормально.

После создания проекта в index.js менять:

serviceWorker.register();
//serviceWorker.unregister();

Все еще пытаюсь понять, чья это вина, но это должно вас подтолкнуть.

Answer 2

Другое решение, найденное по ссылке в ответе Нираджа Нирулы:

Если вы хотите, чтобы опция Удалить куки и данные сайта при закрытии Firefox была включена, нажмите на Manage Exceptionsкнопку и добавьте локальный хост (с протоколом и портом) в список исключений:

Answer 3

Похоже, проблема существует только в Firefox. Любой, кто все еще сталкивается с этой ошибкой, может попробовать отключить параметр Удалить файлы cookie и данные сайта, когда Firefox закрыт в настройках конфиденциальности и безопасности. Или попробуйте обернуть navigator.serviceWorkerиспользования внутри try / catch. В моем случае

         if ("serviceWorker" in navigator) {
    navigator.serviceWorker.ready
      .then(registration => {
        registration.unregister();
      })
      .catch(error => console.log("ServiceWorker Warning: ", error));
  }

Для обсуждения и получения дополнительной информации

Answer 4

Много ответов здесь на самом деле решить эту проблему, но самый простой способ, который я нашел, чтобы добавить НПЙ пакет служит для ваших зависимостей.

yarn add serve или npm i serve

а затем замените начальный скрипт следующим:

"scripts": {
    "start": "serve -s build",
}

Это на самом деле прямо из создания реагирующего-приложения Docs

Answer 5

У меня тоже была эта ошибка. Удалось прояснить это, удалив файл create-response-app serviceWorker.js

Answer 6

Для меня это был неверный URL-адрес при вызовеroute()функция в PreactJS.

По сути, я добавил слишком много косой черты при интеграцииprocess.env.PUBLIC_PATHпеременную в мои ссылки следующим образом:

      export function Example(props: {}) {
  const callback = useCallback((e: JSX.TargetedEvent<HTMLButtonElement>) => {
    route(`${process.env.PUBLIC_PATH}/my/path`)
//                                   ^
//                                   That slash is too much
  }, [])
  return <button onClick={callback}>Click me</button>
}

После нажатия кнопки URL-адрес в строке адреса Chrome выглядел примерно так:

      https://localhost/my-app//my/path
                        ^^
                        Here is the forbidden double slash

Интересно, что мне об этом сообщил только Firefox, а Chrome с радостью отобразил страницу и проигнорировал двойную косую черту.

Решением было просто удалить ненужную косую черту, посколькуenv.process.PUBLIC_PATHвсегда должен заканчиваться косой чертой:

      route(`${process.env.PUBLIC_PATH}my/path`)
//                              ^^
//                              No extra slash fixed it!