如何仅针对HTML请求触发Cloudflare Workers中的Service Worker？

你当前的代码虽然只对HTML请求做处理，但所有请求都会触发Worker的fetch事件——也就是说，哪怕是样式、图片这类非HTML请求，Worker也会启动并执行判断逻辑，这确实会消耗配额。要解决这个问题，核心是在Worker触发之前就过滤掉非HTML请求，而不是等Worker启动后再判断。

最优解决方案：利用Cloudflare Workers的路由匹配规则 #

Cloudflare允许你在Worker的触发器配置里设置精细的匹配条件，只有符合条件的请求才会触发Worker运行，从根源上避免无意义的配额消耗：

1. 登录Cloudflare控制台，进入你的Worker页面
2. 切换到「触发器」标签，点击「添加路由」
3. 在「匹配条件」区域，添加以下规则：
   • 第一个条件：选择「请求方法」，匹配「等于」「GET」
   • 第二个条件：选择「请求头」，字段名填Accept，匹配规则选「包含」，值填text/html
4. 保存路由配置

这样一来，只有GET请求且Accept头包含text/html的请求才会触发你的Worker，其他请求直接跳过Worker逻辑，完全不消耗配额。

代码层面的双重保险（可选） #

虽然路由规则已经能过滤掉大部分非HTML请求，但你可以保留代码里的判断作为双重保险，防止路由配置出现疏漏：

addEventListener('fetch', async event => {
  // 可选判断：作为路由规则的补充，避免配置错误导致的意外触发
  const acceptHeader = event.request.headers.get('accept');
  if (event.request.method === 'GET' && acceptHeader?.includes('text/html')) {
    event.respondWith(handleRequest(event.request));
  }
  // 不满足条件时，Worker会自动回退到默认的请求处理流程，无需额外代码
});

async function handleRequest(request) {
  const response = await fetch(request);
  const newResponse = new Response(response.body, response);
  newResponse.headers.append('x-h-w', 'hello world');
  return newResponse;
}

为什么原方案无法节省配额？ #

原代码是在fetch事件内部做判断，但此时Worker已经启动并开始执行代码了——Cloudflare的Worker配额是按请求触发的次数计算的，只要请求触发了Worker，不管你内部是否做了处理，都会消耗配额。而路由层面的过滤是在Worker启动之前就完成的，完全不会触发Worker，自然不会消耗配额。

内容的提问来源于stack exchange，提问作者user3466399