首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >零成本搭建跨域代理服务 - Cloudflare Workers实战指南

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

原创
作者头像
Miloce
修改2025-09-28 01:54:12
修改2025-09-28 01:54:12
1.7K0
举报
文章被收录于专栏:JoyJoy

前言

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

核心思路很简单:

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

为什么用 Cloudflare Workers?

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

部署步骤

1. 创建 Worker

  1. 登录 Cloudflare Dashboard
  2. 打开 Workers & Pages
  3. 点击 Create applicationCreate Worker
  4. 进入在线编辑器

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

  1. 打开 Worker 管理界面
  2. 进入 Settings → Triggers
  3. 添加 Custom Domainproxy.你的域名.com

5. 最终验证

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

代码语言:txt
复制
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个

小结

  • 不用搭建后端
  • 不用花钱
  • 部署和维护成本接近于零

参考资料

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 为什么用 Cloudflare Workers?
  • 部署步骤
    • 1. 创建 Worker
    • 2. 编写代理脚本
    • 3. 测试
  • 4. 配置自定义域名
    • 4.1 DNS 设置
    • 4.2 绑定到 Worker
    • 5. 最终验证
  • 实际应用场景
    • JavaScript前端调用
    • 支持的数据类型
  • 服务限制与说明
  • 小结
  • 参考资料
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档