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 : /

The Cloudflare worker project has been piled 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`


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.

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./docs/tutorials/configure-your-cdn/

The Cloudflare worker project has been piled 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.`


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.

• javascript
• amazon-web-services
• kml
• cloudflare

• What does this have to do with google-maps? – geocodezip Commented Aug 27, 2019 at 11:16
• The KML layer is placing images on top of Google Maps. I will edit the question to make it clearer. The cached images should be placed on top of Google Maps in the users' browser. – Sujay Commented Aug 27, 2019 at 12:42

2 Answers 2

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.

I think the root of the issue is in CloudFlare's Worker Editor Preview implementation. I found the clue in a "chore" issue in Udacity's code.

which mentions ...

• WARNING: Request Attributes do not currently work in the Worker Editor
• Preview, resulting in an error: "Uncaught (in response) TypeError: Cannot read property 'country' of undefined."

So, just the error in the preview. "Save & Deploy" and test the *.worker.dev URL in a real browser if it works.