零成本搭建跨域代理服务 - Cloudflare Workers实战指南

前言

前端开发中，跨域请求经常让人头大。虽然有不少解决方案，但大多需要后端配合，或者额外的服务成本。这里分享一个基于 Cloudflare Workers 的小技巧，免费搭建一个跨域代理服务，几分钟就能上线，能处理大多数场景下的 CORS 问题。

核心思路很简单：

通过访问 https://proxy.你的域名.com/?target=目标地址，把请求交给 Worker 转发，再在响应里加上 CORS 头。

为什么用 Cloudflare Workers？

零成本：免费额度对个人/小项目完全够用
全球节点：请求自动走 Cloudflare 的边缘网络
自定义域名：支持绑定到自己的域名
通用代理：接口、图片、文件都能代理
部署快：配置完成只需要几分钟

部署步骤

1. 创建 Worker

登录 Cloudflare Dashboard
打开 Workers & Pages
点击 Create application → Create Worker
进入在线编辑器

2. 编写代理脚本

把默认代码替换为以下内容：

javascript 复制代码

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

async function handleRequest(request) {
  const url = new URL(request.url)
  const targetUrl = url.searchParams.get("target")

  if (!targetUrl) {
    return new Response("🚫 请提供目标URL参数: ?target=xxx", { status: 400 })
  }

  try {
    const response = await fetch(targetUrl, {
      method: request.method,
      headers: request.headers,
      body: request.method !== "GET" && request.method !== "HEAD" ? request.body : undefined,
      redirect: "follow"
    })

    const modifiedHeaders = new Headers(response.headers)
    modifiedHeaders.set("Access-Control-Allow-Origin", "*")
    modifiedHeaders.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
    modifiedHeaders.set("Access-Control-Allow-Headers", "*")

    return new Response(response.body, {
      status: response.status,
      headers: modifiedHeaders
    })
  } catch (error) {
    return new Response("❌ 请求失败: " + error.message, { status: 500 })
  }
}

保存并 Deploy

3. 测试

txt 复制代码

https://你的worker名称.workers.dev/?target=https://httpbin.org/json

如果能返回 JSON，就说明代理能用了。

4. 配置自定义域名

4.1 DNS 设置

在域名解析里添加一条 CNAME：

类型	主机记录	记录值
CNAME	proxy	你的worker名称.workers.dev

4.2 绑定到 Worker

打开 Worker 管理界面
进入 Settings → Triggers
添加 Custom Domain ：proxy.你的域名.com

5. 最终验证

访问自定义域名进行最终测试：