零成本搭建跨域代理服务 - 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. 测试

awk

1	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. 最终验证

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

awk

1	https://proxy.你的域名.com/?target=https://api.github.com/users/octocat

成功返回数据即表示跨域代理服务配置完成！

实际应用场景

JavaScript 前端调用

javascript

// 基础跨域请求
async function fetchData() {
  try {
    const response = await fetch('https://proxy.你的域名.com/?target=https://api.example.com/data')
    const data = await response.json()
    console.log('获取数据:', data)
  } catch (error) {
    console.error('请求失败:', error)
  }
}

支持的数据类型

API 接口：https://proxy.你的域名.com/?target=https://api.service.com/endpoint
图片资源：https://proxy.你的域名.com/?target=https://cdn.example.com/image.jpg
文件下载：支持各种格式的文件代理访问

服务限制与说明

项目	免费版限制	实际影响
日请求量	10 万次 / 天	个人项目完全够用
单次执行时间	10 毫秒以内	代理转发绰绰有余
域名绑定	无限制	可配置多个子域名
Worker 数量	100 个	当前需求仅需 1 个