クッキーを許可して、302リダイレクトをワークボックスサービスワーカーツールで処理する方法は？

Question

私はSSRベースの反応型アプリケーションを持っており、現在、キャッシングとオフライン機能のためのWorkboxツールを実装しています。私は主にサイトがサーバー側のクッキーに依存しており、これに基づいてリダイレクトを発行するため、問題が発生しました。

• 初期負荷が正常に動作しますが、サービスワーカー（SW）がオンラインであり、SW内の別のリフレッシュ結果は仕事箱ソース内からURLを呼び出すフェッチをやったら。この間、サーバーはCookieを見つけません（フェッチには資格情報が含まれていません - link）。別のURLにリダイレクト（302）を発行します（Cookieにいくつかのオプションを設定して古いURLに更新できます）。

• これは、サーバーの問題が302のステータスとしてリダイレクトThe FetchEvent for "http://localhost:8080/" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".

• クライアント側で次のようなエラーになりますが、クライアントの結果に：ここに私のサービスワーカーのコードがある site can’t be reached The web page at http://localhost:8080/ might be temporarily down or it may have moved permanently to a new web address. ERR_FAILED

アセットはworkbox-webpackプラグインによって作成されます。

/* global importScripts, WorkboxSW */ 

importScripts('/client/workbox-sw.prod.js') 

// Create Workbox service worker instance 
const workboxSW = new WorkboxSW({ 
    clientsClaim: true, 
    cacheId: 'app-v3-sw', 
}) 

// Placeholder array which is populated automatically by workboxBuild.injectManifest() 
workboxSW.precache([]) 

// cache the offline html to be used as fallback navigation route. 
workboxSW.router.registerRoute(
    '/offline.html', 
    workboxSW.strategies.networkFirst({ 
     networkTimeoutSeconds: 2, 
     cacheableResponse: { statuses: [0, 200] }, 
    }) 
) 

// cache google api requests. 
workboxSW.router.registerRoute(
    /\.googleapis\.com$/, 
    workboxSW.strategies.staleWhileRevalidate({ 
     cacheName: 'v3-google-api-cache', 
     networkTimeoutSeconds: 2, 
     cacheableResponse: { statuses: [0, 200] }, 
    }) 
) 

// cache external requests. 
workboxSW.router.registerRoute(
    /(static\.clevertap\.com|www\.google-analytics\.com|wzrkt\.com|www\.googletagservices\.com|securepubads\.g\.doubleclick\.net|www\.googletagmanager\.com)/, 
    workboxSW.strategies.cacheFirst({ 
     cacheName: 'v3-externals-cache', 
     cacheExpiration: { 
      maxEntries: 30, 
     }, 
     cacheableResponse: { statuses: [0, 200] }, 
    }) 
) 

// Check if client can hit the url via network, if cannot then use the offline fallback html. 
// https://github.com/GoogleChrome/workbox/issues/796 
workboxSW.router.registerRoute(
    ({ event }) => event.request.mode === 'navigate', 
    ({ url }) => 
     // eslint-disable-next-line compat/compat 
     fetch(url.href).catch(() => caches.match('/offline.html')) 
) 

P.S. これは私のワークシートツールやサービスワーカーの最初の試みですが、私はいくつかの詳細を見落としたり、見落としたりしているかもしれません。親切に私をある方向に向ける。デフォルトでは

Answer 1

、fetchはクッキーを渡しませんので、あなたはオプションで資格情報を追加する必要があります。ここ

workboxSW.router.registerRoute(
    ({ event }) => event.request.mode === 'navigate', 
    ({ url }) => fetch(url.href, {credentials: 'same-origin'}).catch(() => caches.match('/offline.html')) 
) 

詳細情報：それは実際に最後によって引き起こされていたhttps://github.com/github/fetch#sending-cookies