网硕互联帮助中心别再为CORS报错抓狂！没有后端服务器？云函数秒变你的免费“跨域救星”！
一 红色的CORS跨域错误
前端开发想调个第三方接口（例如：百度文心一言的API），是不是经常被这个 红色的CORS跨域错误 搞得头皮发麻？😤
没错！浏览器出于安全考虑，默认阻止了这种“跨域”请求。最正统解法当然是部署自己的后端服务做代理。但是！不是每个前端都有现成的后端服务器，或者为了一个小调试去折腾部署，太麻烦！
今天，就教你一个超实用、超便捷、近乎零成本的解决方案——利用腾讯云函数！ 🚀
云函数，就是你的“临时后端”代理！
它的核心思路很简单：
1. 你把请求发给部署在腾讯云上的一个轻量级函数（云函数）。
2. 云函数（在服务器环境，没有跨域限制）帮你转发请求到目标API（如百度）。
3. 云函数拿到结果后，加上允许跨域的响应头，再返回给你的前端。
好处简直不要太多：
-
• ✅ 极速搭建： 几分钟搞定，告别复杂部署！
-
• ✅ 零服务器成本： 腾讯云函数有丰厚的免费额度，像获取Token这种低频调用，基本不用花钱！(具体计费参考腾讯云文档)
-
• ✅ 保护敏感信息： API Key/Secret 不用写死在前端代码里，安全放在云函数环境变量！
-
• ✅ 专注前端： 解决跨域，让你调试更顺畅！
二 手把手教程：用腾讯云函数代理百度API获取Token (通用方法，举一反三！)
核心准备： 一个腾讯云账号（注册很简单）。
步骤1：创建你的“跨域救星”云函数
1. 登录腾讯云控制台，找到 「云函数」 服务，点击 「新建」。
2. 创建方式：选择「从头开始」。
3. 函数类型：选择「事件函数」。
4. 函数名：起个有意义的名字，比如 GetBaiduTokenProxy。
5. 地域：选个离你近的地区（如北京、上海）。
6. 运行环境：选 Node.js (推荐 16.13 或更新稳定版)。
7. 函数代码：选“在线编辑”，「执行方法」输入“index.main”，你的“临时后端”就建好了！⏱️
步骤2：注入“灵魂”代码
进入函数代码在线编辑器，把下面的核心逻辑粘贴进去。这段代码的作用就是安全地请求百度Token API并返回允许跨域的结果，且使用原生http实现，不需要任何额外的库。
// 引入必要模块
const https = require('https');
const querystring = require('querystring');
exports.main = async (event) => {
// 关键！从环境变量读取敏感信息 (后面设置)
const { BAIDU_API_KEY, BAIDU_SECRET_KEY } = process.env;
// 准备请求百度的数据
const postData = querystring.stringify({
grant_type: 'client_credentials',
client_id: BAIDU_API_KEY,
client_secret: BAIDU_SECRET_KEY
});
// 配置请求选项
const options = {
hostname: 'aip.baidubce.com',
path: '/oauth/2.0/token',
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Content-Length': Buffer.byteLength(postData)
}
};
// 发起请求并返回结果 (核心是设置跨域头！)
return new Promise((resolve, reject) => {
const req = https.request(options, (res) => {
let data = '';
res.on('data', (chunk) => data += chunk);
res.on('end', () => {
// 成功返回：状态码200 + 跨域头 + 百度返回的数据
resolve({
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*', // 关键！允许所有来源跨域
'Content-Type': 'application/json'
},
body: data
});
});
});
req.on('error', (error) => {
// 出错返回500
reject({
statusCode: 500,
body: JSON.stringify({ error: error.message })
});
});
req.write(postData);
req.end();
});
};
划重点： 代码中的 'Access-Control-Allow-Origin': '*' 就是解决跨域问题的魔法咒语！✨
步骤3：守护你的密钥 – 设置环境变量
绝对不要把 API Key 和 Secret Key 硬编码在代码里！太危险！
1. 在云函数控制台，找到 「函数配置」 选项。
2. 找到 「环境变量」 设置。
3. 点击 「编辑」，添加两条：
-
• 键： BAIDU_API_KEY 值： 你的百度API Key
-
• 键： BAIDU_SECRET_KEY 值： 你的百度Secret Key
4. 保存！ 🔒
步骤4：开通访问通道 – 配置函数 URL
2025年6月30日起，腾讯云不再支持API网关触发器，改用函数URL了。
现在需要给你的云函数一个公网访问地址，让前端能调用它。
1. 切换到 「函数 URL」 选项卡。
2. 点击 「新建函数 URL」，如下图所示。
3. 点击「确定」。
然后复制生成的 公网访问路径！ 这个就是你的前端要调用的地址了！
步骤5：本地测试一把
在云函数代码的在线编辑器下方，使用 「测试」 功能模拟调用一下。如果看到返回了百度的Token信息（带 access_token 字段），恭喜你！后端代理通道打通了！👏
步骤6：前端调用 – 告别跨域！
在你的前端代码里（比如纯JS/TS、或Vue/React/Angular），用最熟悉的 fetch 或 axios 调用你刚刚复制的那个 函数URL 就行了！就像调用自己的同域接口一样简单！
// 替换成你自己的云函数URL
const proxyUrl = 'https://your-awesome-function-url.ap-beijing.tencentscf.com';
async function getBaiduToken() {
try {
const response = await fetch(proxyUrl); // 直接GET调用 (云函数内部是POST百度)
const data = await response.json();
if (data && data.access_token) {
console.log('成功获取Token:', data.access_token);
return data.access_token;
} else {
throw new Error('获取Token失败：返回数据异常');
}
} catch (error) {
console.error('调用云函数代理失败:', error);
throw error; // 或进行错误处理
}
}
// 使用它
getBaiduToken().then(token => {
// 用token去调用百度其他API吧！
});
大功告成！🎉
现在，你的前端应用就可以通过这个腾讯云函数“桥梁”，畅通无阻地访问百度API（或其他任何第三方API），再也不用看CORS错误的脸色了！而且，你的敏感密钥也安全地藏在了云端。
三 总结
-
• 云函数是解决前端开发跨域痛点的轻量级神器！
-
• 几分钟搭建，几乎零成本（免费额度够用）！
-
• 安全存储敏感信息，前端代码更干净！
-
• 一次搭建，多处受益（可代理不同API）！
赶紧收藏这篇保姆级教程，下次遇到跨域拦路虎，分分钟搞定它！ 觉得有用？点赞👍、分享📤 给你的小伙伴吧！大家还用过什么奇妙的跨域解决方案？欢迎在评论区留言讨论~
四 联系作者
-
• 公众号：楚游香
-
• 个人网站: https://www.chuyouxiang.com/
作者的公众号和博客会不定期分享一些游戏开发技巧和上线实战经验，欢迎关注，共同进步！
作者同时创建了一个游戏开发交流群，供朋友们技术交流、学习合作、问题求助等，感兴趣的朋友可以关注我的公众号，并留言加群。
往期文章推荐
10分钟打通Blender→Cocos！3D游戏建模极简入门(2）10分钟打通Blender→Cocos！3D游戏建模极简入门(1）如何让CocosCreator3.x引擎启动提速60%CocosCreator3.x中动态资源的加载原理和释放方案Cocos插件：超强图片压缩（全自动图片压缩神器）
#前端开发 #跨域问题 #CORS #腾讯云 #云函数 #API代理 #百度API #调试技巧
评论前必须登录！
注册