[解決済み] Uncaught (in promise) TypeError.を修正する方法。Cloudflare worker の 'Uncaught (in promise) TypeError: Cannot read property 'method' of undefined'' を修正するには？

質問

私は、React Google MapsのKMLレイヤーから呼び出される画像をキャッシュし、画像表示のレイテンシーを低減し、Cloudflare Workerを使用してスケールでAWS S3への呼び出しを低減しようとしています。

私はこのリンクから見つけることができるCloudflareのチュートリアルに従いました。 https://workers.cloudflare.com/docs/tutorials/configure-your-cdn/

Cloudflare ワーカープロジェクトはスクリプトにコンパイルされ、コンソールは以下のエラーを表示しています。 Uncaught (in promise) TypeError: 未定義のプロパティ 'method' を読み取ることができません。 Uncaught (in response) TypeError: 未定義のプロパティ 'method' を読み取れませんでした。

Cloudflareで生成されたスクリプトのminifiedファイルを確認しましたが、チュートリアルに忠実に従ったにもかかわらず、何が間違っているのかがわかりません。

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

const BUCKET_NAME = 'nightskybrightness'
const BUCKET_URL = `https://${BUCKET_NAME}.s3.eu-west-3.amazonaws.com`


async function serveAsset(event) {
  const url = new URL(event.request.url)
  const cache = caches.default
  let response = await cache.match(event.request)

  if (!response) {
    response = await fetch(`${BUCKET_URL}${url.pathname}`)
    const headers = { 'cache-control': 'public, max-age=15638400' }
    response = new Response(response.body, { ...response, headers })
    event.waitUntil(cache.put(event.request, response.clone()))
  }
  return response

}


async function handleRequest(event) {
  if (event.request.method === 'GET') {
    let response = await serveAsset(event)
    if (response.status > 399) {
      response = new Response(response.statusText, { status: response.status })
    }
    return response
  } else {
    return new Response('Method not allowed', { status: 405 })
  }
}

期待される結果：CloudflareはCDNに画像をキャッシュし、最終ユーザーから呼び出されたときに遅延を減らして提供し、AWS S3への呼び出しも減らすことができます。 network/headersセクションのcf-cache-statusはHITまたはMISSを示すはずです。キャッシュされた画像は、ユーザーのブラウザでGoogle Mapsの上にあるKMLレイヤーに配置されることになります。

実際の結果：Cloudflareワーカースクリプトがエラーを投げ、意図した画像キャッシュが行われない。 network/headers セクションの cf-cache-status は、Response Headers セクションに表示すらされない。

どうすればいいですか？

問題は、この行にあります。

  event.respondWith(handleRequest(event.request))

を渡しています。 event.request をパラメータとして handleRequest() . しかし、この行で

async function handleRequest(event) {

handleRequest() を取るように定義されています。 event でなく event.request . だからこの行で

  if (event.request.method === 'GET') {

にアクセスしていることになります。 event.request.request.method . しかし event.request.request は undefined にアクセスしようとすると、例外が発生します。 undefined.method .

を変更することをお勧めします。 event.respondWith の行に変更します。

  event.respondWith(handleRequest(event))

リンク先のサンプルコードではこのようになります。