Блог

У меня есть приложение, использующее react / express. Я столкнулся с конфликтом с авторизацией паспорта через вход в Facebook. Похоже, что service worker блокирует вызов «mysite.com/api/auth/facebook «. Я также попытался обойти эту проблему, добавив двойной тире к этому URL-адресу, например «mysite.com/__api/auth/facebook «который преуспел на первом этапе, но обратный вызов facebook (к mysite.com/api/callback/facebook ) потерпел неудачу. Если я также добавлю двойной тире для обратного вызова facebook (mysite.com/__api/callback/facebook ) Я получил эту ошибку:

 URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.
  

Итак, похоже, что я должен использовать sw-предварительный кэш, как предлагалось в других сообщениях. Тем не менее, я попробовал эту конфигурацию sw-precache, и это мне не помогло.

 // config/sw.js
module.exports = {
  staticFileGlobs: [
    'build/**/*.js',
    'build/**/*.css',
    'build/index.html'
  ],
  navigateFallback: '/index.html',
  navigateFallbackWhitelist: [/^/api/auth/.*/],
  cacheId: 'my-magical-cache-machine'
}
  

Вот как я его создаю:

 "build": "react-scripts build amp;amp; sw-precache --config=sw-precache.js amp;amp; copyfiles -u 1 build/**/*.* prod",
  

Итак, почему navigateFallbackWhitelist не работает для меня?

Обновить:

Я сам разобрался … Во-первых, sw-precache устарел, поэтому я переключился на sw-precache-cra, затем я просто меняю navigateFallbackWhitelist по умолчанию на

 navigateFallbackWhitelist: [ /^(?!/api/(auth|callback)/).*/ ]
  

На самом деле, я изначально неправильно понял «белый список».