我的前端放到cf的pages分配一个域名，后端通过tunnel分配一个域名，每个域名建立连接都需要时间，我能让他们用同一个域名吗

作者
213 次阅读

本文最后更新于 2026年5月22日。

这是一个非常棒的想法。让前端和后端共享同一个域名（比如前端在 example.com，后端在 example.com/api）不仅能减少 DNS 查询和 TLS 握手的时间，还能彻底解决前端开发中最头疼的跨域（CORS）问题。

在 Cloudflare 生态中，实现这一点的最佳方案是使用 Cloudflare Workers 作为“反向代理”或“路由器”。

方案：使用 Cloudflare Workers 统一入口

你可以创建一个轻量级的 Worker 绑定到你的主域名，根据 URL 路径来决定是将请求转发给 Pages（前端）还是 Tunnel（后端）。

1. 逻辑架构

  • 用户访问 example.com/api/* → Worker 转发请求到你的 Tunnel 域名。

  • 用户访问 其他路径 → Worker 转发请求到你的 Pages 域名。

2. 代码实现

你可以创建一个简单的 Worker，代码示例如下：

JavaScript

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    // 如果路径以 /api 开头，转发到后端 Tunnel
    if (url.pathname.startsWith('/api')) {
      // 这里的 backend-tunnel.example.com 是你目前的 Tunnel 域名
      const backendUrl = `https://backend-tunnel.example.com${url.pathname}${url.search}`;
      
      // 创建新的请求对象，保留原有的 Method, Headers 和 Body
      const newRequest = new Request(backendUrl, request);
      return fetch(newRequest);
    }

    // 其他所有请求，转发到前端 Pages
    // 这里的 frontend.pages.dev 是你目前的 Pages 域名
    const frontendUrl = `https://your-app.pages.dev${url.pathname}${url.search}`;
    return fetch(new Request(frontendUrl, request));
  }
};

3. 配置步骤

  1. 部署 Worker：在 Cloudflare 控制台新建一个 Worker，粘贴上面的代码。

  2. 绑定域名：

    • 进入你的域名管理界面。

    • 在 Workers Routes 选项卡中，添加一个路由。

    • 设置路由为 example.com/*，并选择你刚才创建的 Worker。

  3. DNS 设置：

    • 确保 example.com 在 DNS 记录中指向一个有效的地址（即使是 100:: 这样的占位符也可以，只要开启了橙色云朵代理）。

这样做的好处

  • 性能提升：浏览器只需与 Cloudflare 建立一个 TCP/TLS 连接，后续所有请求（动静分离）都复用该连接（HTTP/2 或 HTTP/3 多路复用）。

  • 安全性：你可以隐藏掉原始的 Tunnel 域名和 Pages 域名，用户只看到主域名。

  • 告别 CORS：因为前后端同源，你不再需要在后端配置繁琐的跨域头。