
前端开发中,跨域请求经常让人头大。虽然有不少解决方案,但大多需要后端配合,或者额外的服务成本。这里分享一个基于 Cloudflare Workers 的小技巧,免费搭建一个跨域代理服务,几分钟就能上线,能处理大多数场景下的 CORS 问题。
核心思路很简单:
通过访问
https://proxy.你的域名.com/?target=目标地址,把请求交给 Worker 转发,再在响应里加上 CORS 头。
把默认代码替换为以下内容:
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
https://你的worker名称.workers.dev/?target=https://httpbin.org/json如果能返回 JSON,就说明代理能用了。
在域名解析里添加一条 CNAME:
类型 | 主机记录 | 记录值 |
|---|---|---|
CNAME | proxy | 你的worker名称.workers.dev |
proxy.你的域名.com 访问自定义域名进行最终测试:
https://proxy.你的域名.com/?target=https://api.github.com/users/octocat成功返回数据即表示跨域代理服务配置完成!
// 基础跨域请求
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)
}
}https://proxy.你的域名.com/?target=https://api.service.com/endpointhttps://proxy.你的域名.com/?target=https://cdn.example.com/image.jpg项目 | 免费版限制 | 实际影响 |
|---|---|---|
日请求量 | 10万次/天 | 个人项目完全够用 |
单次执行时间 | 10毫秒以内 | 代理转发绰绰有余 |
域名绑定 | 无限制 | 可配置多个子域名 |
Worker数量 | 100个 | 当前需求仅需1个 |
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。