Question

我正在尝试在React Google Maps中缓存将由KML层调用的图像，以减少显示图像的延迟并减少使用Cloudflare Worker大规模调用AWS S3的调用。

我遵循了Cloudflare教程，可以通过以下链接找到该教程：https://workers.cloudflare.com/docs/tutorials/configure-your-cdn/

Cloudflare worker项目已被编译为脚本，并且控制台指示以下错误。未捕获（承诺）TypeError：无法读取未定义的属性“方法” 未捕获（作为响应）TypeError：无法读取未定义的属性“方法”

我已经检查了Cloudflare生成的脚本的缩小文件，但是尽管我认真地遵循了本教程，但我无法弄清楚出了什么问题。

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的调用。 “网络/标题”部分中的cf-cache-status应指示HIT或MISS。缓存的图像将由KML层定位在用户浏览器中的Google地图顶部。

实际结果：Cloudflare工作程序脚本引发错误，因此未按预期进行图像缓存。 “网络/标题”部分中的cf-cache-status甚至没有显示在“响应标题”部分中。

Answer 1

问题是在此行上：

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

这就是您链接到的示例代码中的样子。

如何修复Cloudflare worker中的“未捕获（承诺）TypeError：无法读取未定义的属性“方法””？

1 个答案: