Cloudflare Workers：URL包含?beta参数时注入代码失败求助

我看了你的代码，问题出在查询参数的判断逻辑上，这是个很容易踩的小坑！

问题根源 #

你现在用url.pathname.includes("?beta")来判断是否存在beta参数，但pathname属性只包含URL的路径部分（比如/page.html），完全不包含查询参数（就是?后面的部分）。所以不管URL后面加不加?beta，这个判断条件永远不会成立，自然不会执行HTMLRewriter的注入逻辑。

修正后的代码 #

我们需要改用url.searchParams.has("beta")来检查是否存在beta参数（这个方法更严谨），同时优化代码避免重复发起请求：

addEventListener("fetch", (event) => { 
  event.respondWith( 
    handleRequest(event.request).catch( 
      (err) => new Response(err.stack, { status: 500 }) 
    ) 
  ); 
}); 

class ElementHandler { 
  element(element) { 
    element.append(`<style>.test {display:none}</style>`, { html: true }); 
  } 
} 

async function handleRequest(request) { 
  const url = new URL(request.url);
  // 先获取响应，避免重复发起请求
  const res = await fetch(request);
  
  // 正确判断beta参数是否存在
  if (url.searchParams.has("beta")) {
    // 额外检查响应是否是HTML类型，避免对非HTML资源做无用处理
    if (res.headers.get("Content-Type")?.includes("text/html")) {
      return new HTMLRewriter().on("head", new ElementHandler()).transform(res);
    }
  }
  
  // 不满足条件时直接返回原响应
  return res;
}

额外优化建议 #

1. 检查响应类型：加入Content-Type判断，确保只对HTML页面执行注入逻辑，避免浪费资源处理图片、JS、CSS等非HTML资源。
2. 避免重复请求：原来的代码在else分支又调用了一次fetch(request)，会导致重复发起请求，改成复用第一次的res更高效。
3. 调试小技巧：如果还是有问题，可以在handleRequest里加日志（比如console.log(url.searchParams)），然后在Cloudflare Workers的控制台查看日志，确认参数是否被正确识别。

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