如何在使用api-football开发足球应用时隐藏API密钥？

一、Netlify无服务器函数的正确配置步骤 #

• 在项目根目录新建netlify/functions文件夹（没有就直接创建）
• 在该文件夹下创建get-standings.js文件，写入以下代码：

exports.handler = async function(event, context) {
  // 从Netlify环境变量读取密钥，无需硬编码
  const API_KEY = process.env.API_FOOTBALL_KEY;
  // 接收前端传入的联赛ID参数，可根据需求调整
  const LEAGUE_ID = event.queryStringParameters.leagueId;

  try {
    // 后端直接请求api-football接口
    const response = await fetch(`https://api-football.com/v3/standings?league=${LEAGUE_ID}&season=2024`, {
      headers: {
        'x-apisports-key': API_KEY
      }
    });
    const data = await response.json();
    // 将数据返回给前端
    return {
      statusCode: 200,
      body: JSON.stringify(data)
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: '获取积分榜失败' })
    };
  }
}

• 登录Netlify后台，进入你的站点→「Site settings」→「Environment variables」，添加变量API_FOOTBALL_KEY，值填写你的api-football密钥
• 修改前端调用逻辑，不再直接请求api-football，转而调用Netlify函数：

// 前端加载积分榜的示例代码
async function loadStandings(leagueId) {
  try {
    const res = await fetch(`/.netlify/functions/get-standings?leagueId=${leagueId}`);
    const standingsData = await res.json();
    // 这里处理并渲染积分榜数据
    console.log(standingsData);
  } catch (err) {
    console.error('加载失败:', err);
  }
}

二、常见问题排查 #

• 函数路径错误：前端请求路径必须是/.netlify/functions/你的函数名，本地测试需安装Netlify CLI，用netlify dev启动项目才能触发函数
• 环境变量未生效：Netlify部署后需重新发布站点；本地开发时在项目根目录创建.env文件，写入API_FOOTBALL_KEY=你的密钥，通过Netlify CLI启动才能读取
• CORS问题：通过函数转发后，前端请求的是同域名接口，不会存在跨域问题，无需额外配置

三、其他备选方案 #

• 自行搭建简单Node.js后端（如Express），将API密钥存储在后端，前端请求自有后端接口，由后端转发请求到api-football
• 使用Vercel Edge Functions，配置逻辑与Netlify类似，通过环境变量存储密钥，前端调用边缘函数接口

内容的提问来源于stack exchange，提问作者Mohammed Salman Ali