如何通过Cloudflare Worker配置Webflow与WordPress子目录反向代理？

针对单域名abc.com主站指向Webflow、/service-page路径映射到WordPress子域名的需求，原代码存在路径映射错误、请求头未适配后端服务、响应资源路径未重写等问题，以下是修复后的完整代码：

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const pathname = url.pathname;

  // === 配置项 ===
  const webflowOrigin = "https://abc.webflow.io"; // 替换为你的Webflow实际域名
  const wordpressOrigin = "https://service.yourdomain.com"; // 替换为你的WordPress子域名
  const wpPathPrefix = "/service-page";

  let response;

  // === 路由到WordPress ===
  if (pathname.startsWith(wpPathPrefix) || pathname.startsWith("/wp-admin") || pathname.startsWith("/wp-login.php")) {
    // 构造WordPress目标路径：移除/service-page前缀，保证后端接收到正确的内部路径
    let wpPath = pathname;
    if (pathname.startsWith(wpPathPrefix)) {
      wpPath = pathname.slice(wpPathPrefix.length) || "/";
    }
    const wpUrl = `${wordpressOrigin}${wpPath}${url.search}`;

    // 克隆请求并修正关键请求头
    const wpRequest = new Request(wpUrl, request);
    // 设置WordPress识别的Host头，避免域名不匹配被拒绝
    wpRequest.headers.set("Host", new URL(wordpressOrigin).hostname);
    // 移除Cloudflare特定头，防止后端验证异常
    wpRequest.headers.delete("CF-Connecting-IP");

    response = await fetch(wpRequest);
    let newResponse = new Response(response.body, response);

    // 重写WordPress跳转地址，保持主域名路径结构
    if (response.status >= 300 && response.status < 400 && response.headers.has("location")) {
      const location = response.headers.get("location");
      if (location.startsWith(wordpressOrigin)) {
        const newLocation = location.replace(wordpressOrigin, `${url.origin}${wpPathPrefix}`);
        newResponse.headers.set("location", newLocation);
      }
    }

    // 重写HTML中的WordPress域名，确保前端资源加载路径正确
    const contentType = newResponse.headers.get("content-type");
    if (contentType && contentType.includes("text/html")) {
      let body = await newResponse.text();
      body = body.replace(new RegExp(wordpressOrigin, "g"), `${url.origin}${wpPathPrefix}`);
      newResponse = new Response(body, newResponse);
      newResponse.headers.set("content-length", body.length.toString());
    }

    return newResponse;
  }

  // === 路由到Webflow ===
  const webflowUrl = `${webflowOrigin}${pathname}${url.search}`;
  const wfRequest = new Request(webflowUrl, request);
  // 设置Webflow识别的Host头
  wfRequest.headers.set("Host", new URL(webflowOrigin).hostname);
  wfRequest.headers.delete("CF-Connecting-IP");

  response = await fetch(wfRequest);
  return response;
}

关键修复说明 #

• 路径映射修正：原代码直接将/service-page拼到WordPress域名后，现在会移除该前缀，确保WordPress接收到正确的内部路径（如abc.com/service-page/post映射为service.yourdomain.com/post）
• Host头适配：强制设置目标服务的Host头，解决后端因域名不匹配拒绝请求的问题
• HTML资源路径重写：自动替换WordPress返回HTML中的子域名，保证前端加载的CSS、JS、图片等资源都指向主域名的/service-page路径
• 请求头清理：移除Cloudflare特定头，避免后端验证异常

额外注意事项 #

1. 确保Cloudflare Worker已绑定到abc.com域名
2. Webflow和WordPress的域名需在Cloudflare中托管，SSL设置为「完全」或「严格」
3. 可通过Cloudflare Worker日志功能查看请求/响应细节，排查潜在问题

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