如何不在客户端侧调用API 防止API调用额度被恶意刷取

你的判断完全正确，把带密钥的API调用逻辑写在前端客户端代码里是非常危险的做法，不止恶意刷新能耗光额度，任何访问者打开浏览器F12就能直接拿到你的明文API Key，完全可以复制走用于其他用途，产生的超额费用都会算在你的账号上。把API调用迁移到服务端、再把结果返回给前端是非常成熟的常规处理方案，完全可行。

你需要准备什么 #

你确实需要一个服务端运行环境，不用一开始就搞复杂的云服务，根据自己的情况选就行：

• 优先选Node.js，和你现在用的原生JS语法完全一致，学习成本最低，不用重新学新语言。如果觉得原生Node处理路由、请求太麻烦，可以装个Express这类极轻量的Web框架，写接口逻辑会更简单。
• 不想折腾服务器运维的话，直接选Serverless云函数、或者静态托管平台自带的边缘函数能力，大部分都有足够个人站点用的免费额度，写完代码上传就能跑，不用管服务器配置、运维这些杂事。
• 如果你现在的网站是托管在支持服务端逻辑的平台上，直接在同平台加个接口函数就行，连单独部署服务都不用。

核心实现逻辑 #

整个流程非常简单，一共三步：

1. 把你的API Key存在服务端的环境变量里，绝对不要硬编码在代码里、更不要提交到公开代码仓库。
2. 前端不再直接请求RapidAPI的第三方接口，改成请求你自己的服务端接口，前端代码里不需要再带任何密钥相关的内容。
3. 服务端收到前端的请求后，带着存在环境变量里的密钥去请求第三方API，拿到结果后再返回给前端。

代码示例 #

服务端最简示例（Node.js原生实现，无额外依赖）

const http = require('http');
const https = require('https');

// 从服务端环境变量读取API密钥，不要硬写在代码里
const RAPIDAPI_KEY = process.env.RAPIDAPI_KEY;
const RAPIDAPI_HOST = '你的第三方接口host';
const TARGET_API_URL = 'https://你要调用的RapidAPI完整接口地址';
const ALLOW_ORIGIN = '你的前端站点域名';

const server = http.createServer(async (req, res) => {
  // 配置跨域，只允许你自己的前端站点调用
  res.setHeader('Access-Control-Allow-Origin', ALLOW_ORIGIN);
  res.setHeader('Content-Type', 'application/json');

  // 只处理你自定义的接口路径
  if (req.method === 'GET' && req.url === '/api/fetch-data') {
    // 服务端发起对第三方API的请求，密钥全程不暴露给前端
    const apiReq = https.request(TARGET_API_URL, {
      headers: {
        'X-RapidAPI-Host': RAPIDAPI_HOST,
        'X-RapidAPI-Key': RAPIDAPI_KEY
      }
    }, (apiRes) => {
      let data = '';
      apiRes.on('data', chunk => data += chunk);
      apiRes.on('end', () => {
        // 把第三方返回的结果发给前端
        res.end(data);
      });
    });
    apiReq.end();
    return;
  }

  res.statusCode = 404;
  res.end(JSON.stringify({msg: '接口不存在'}));
});

server.listen(3000, () => {
  console.log('服务运行在3000端口');
});

前端调用代码修改

你原来的前端fetch逻辑直接改成请求你自己的服务端接口即可，不需要带任何密钥参数：

const res = await fetch(`https://你自己的服务端域名/api/fetch-data`);
const data = await res.json();

额外的防刷优化 #

光把API调用移到服务端还不够，再加几个简单配置能进一步省额度、防恶意刷：

• 加缓存：如果第三方接口返回的数据不是秒级更新的，服务端拿到一次结果后可以存5分钟到几小时的缓存，相同请求直接返回缓存内容，不用每次都调用付费API，能省90%以上的额度。
• 加限流：针对单个IP设置请求频率限制，比如同一个IP1分钟最多请求3-5次，直接挡住恶意刷新的请求。
• 简单校验：可以给接口加个简单的referer校验，只允许来自你自己站点的请求调用，拦截其他地方直接爬你接口的请求。

内容的提问来源于stack exchange，提问作者Siuuuuuu