Cloudflare Worker Fetch实现URL掩码：图片处理与522超时问题排查

你的需求是用Cloudflare Worker实现URL掩码，将*.site1.com/*的请求代理到指定图片，同时保留原URL。当前代码存在两个核心问题：二进制图片的响应处理错误，以及硬编码Content-Type导致的响应类型不匹配，这也是522超时或响应异常的主要原因。

核心问题拆解 #

1. 错误的Content-Type设置：你在init里强制把响应Content-Type设为text/html，这会让浏览器把图片二进制数据当成HTML解析，完全不符合预期。
2. 图片响应的错误处理：图片是二进制数据，不能用text()或json()方法读取，应该用arrayBuffer()或直接转发响应体。
3. 冗余的gatherResponse函数：对于代理场景，不需要手动转换不同类型的响应，直接复用目标响应的headers和body，仅修改必要字段即可。

修正后的Worker代码 #

export default {
  async fetch(request) {
    // 目标图片地址
    const targetUrl = "https://storage.googleapis.com/mybucket/image1.png";

    try {
      // 发起请求到目标地址，不要硬编码请求headers，避免干扰目标服务器判断
      const response = await fetch(targetUrl);

      // 复制目标响应的headers，修改必要字段以适配URL掩码
      const modifiedHeaders = new Headers(response.headers);
      // 移除可能暴露目标地址的专属headers（可选操作）
      modifiedHeaders.delete("x-goog-storage-class");
      modifiedHeaders.delete("x-goog-hash");
      // 确保Content-Type正确继承自目标响应，若需强制指定可手动设置：
      // modifiedHeaders.set("content-type", "image/png");

      // 返回修改后的响应，复用原响应的body、状态码和状态文本
      return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: modifiedHeaders
      });
    } catch (error) {
      // 捕获超时或请求失败的情况，返回友好错误
      return new Response("请求目标资源失败", { status: 500 });
    }
  },
};

关键修改说明 #

• 移除硬编码的Content-Type：直接复用目标响应的Content-Type，确保浏览器能正确识别图片类型。
• 直接转发响应体：用response.body直接传递二进制数据，避免转换过程中出现数据损坏。
• 添加错误捕获：处理目标地址不可达或超时的情况，避免无意义的522错误（522通常是Worker无法连接到目标服务器，需先确认targetUrl能正常访问）。
• 清理专属headers：移除目标服务器的标识性headers，避免暴露代理的真实来源（可选操作）。

额外排查步骤（针对522超时） #

1. 确认https://storage.googleapis.com/mybucket/image1.png能直接访问，无防火墙或地域限制。
2. 检查Cloudflare Worker路由规则：确保*.site1.com/*已正确绑定到该Worker，且状态为"Active"。
3. 验证site1的DNS设置：A记录192.0.2.1已开启"橙色云"（经Cloudflare代理），且域名已完成Cloudflare NS记录切换。

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