部署基于RapidAPI LiveScore的网站时，如何隐藏API密钥？

因为前端直接发起请求的话，无论怎么处理，API密钥都会被浏览器暴露出来，所以必须通过后端中转请求，这是最靠谱的简单方案。下面给你一个基于Node.js + Express的极简实现：

1. 搭建简易后端代理 #

• 先初始化项目，安装依赖：

npm init -y
npm install express dotenv node-fetch

• 创建后端文件（比如server.js）：

require('dotenv').config();
const express = require('express');
const fetch = require('node-fetch');
const app = express();
const port = process.env.PORT || 3001;

// 允许前端跨域请求
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// 代理LiveScore API的接口
app.get('/api/live-scores', async (req, res) => {
  const options = {
    method: 'GET',
    headers: {
      'X-RapidAPI-Key': process.env.RAPIDAPI_KEY,
      'X-RapidAPI-Host': 'livescore6.p.rapidapi.com'
    }
  };

  try {
    const response = await fetch('https://livescore6.p.rapidapi.com/matches/v2/list-by-date?Category=soccer&Date=20231801&Timezone=-7', options);
    const data = await response.json();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: '请求失败' });
  }
});

app.listen(port, () => {
  console.log(`代理服务器运行在端口 ${port}`);
});

• 创建.env文件，把密钥存进去：

RAPIDAPI_KEY=你的实际API密钥

2. 修改前端代码 #

把原来直接请求RapidAPI的代码，改成请求自己的后端接口：

// 前端index.js修改后
fetch('http://localhost:3001/api/live-scores')
.then(response => response.json())
.then(data => {
  // 你的业务代码
})
.catch(error => console.error('请求出错:', error));

3. 部署注意事项 #

• 部署后端时，要确保平台支持环境变量配置（比如Vercel、Railway、Heroku这些平台都能直接在后台设置环境变量，不用把.env文件上传）。
• 前端部署后，把请求地址改成后端的线上域名，不要用localhost。

为什么之前的方法没生效？ #

• .env方法在前端直接用的话，打包时会把变量暴露出来，因为前端代码最终会在浏览器里运行，所有变量都能被看到。
• 无服务器方法如果没成功，大概率是配置没弄对（比如函数的权限、跨域设置、环境变量没正确注入），上面这个极简代理方案比复杂的无服务器配置更容易上手。

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