How to fix 'Uncaught (in promise) TypeError: Cannot read property 'method' of undefined' in Cloudflare worker?

Question

I am trying to cache images that will be called by a KML layer in React Google Maps in order to reduce latency in displaying images and reduce calls to AWS S3 at scale using Cloudflare Worker .

I have followed the Cloudflare tutorial that can be found through this link : https://workers.cloudflare.com/docs/tutorials/configure-your-cdn/

The Cloudflare worker project has been compiled into a script and the console is indicating the following errors. Uncaught (in promise) TypeError: Cannot read property 'method' of undefined Uncaught (in response) TypeError: Cannot read property 'method' of undefined

I have checked the minified file of the script generated by Cloudflare but I am not being able to figure out what is going wrong although I followed the tutorial diligently.

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 })
  }
}

Expected result : Cloudflare will cache the images on it's CDN and serve them when called by final users with reduced latency and also reduce calls to AWS S3. cf-cache-status in network/headers section should indicate a HIT or MISS. The cached images will be positioned by the KML layer on top of Google Maps in the users' browser.

Actual result : Cloudflare worker script is throwing an error thus no image caching is taking place as intended. cf-cache-status in network/headers section doesn't even show up in Response Headers section.

Answer 1

The problem is that on this line:

  event.respondWith(handleRequest(event.request))

you are passing event.request as the parameter to handleRequest(). But on this line:

async function handleRequest(event) {

handleRequest() is defined to take just event, not event.request. So on this line:

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

you are actually accessing event.request.request.method. But event.request.request is undefined, therefore you get an exception about trying to access undefined.method.

I would suggest changing the event.respondWith line to:

  event.respondWith(handleRequest(event))

This is how it looks in the example code that you linked to.