纯HTML/JS网站开发：如何将API密钥托管于后端供前端调用？

当然可以，这是隐藏API密钥的标准做法——绝对不能把密钥放在前端代码里，哪怕加密混淆都没用，浏览器能拿到所有前端资源。后端作为中间层，帮前端调用第三方API，全程密钥只在后端流转，前端完全碰不到。

下面给你适配纯HTML/CSS/JS项目的具体步骤，用新手最容易上手的Node.js+Express方案：

第一步：搭建极简后端服务 #

1. 先确保你电脑装了Node.js
2. 创建一个项目文件夹（比如my-project），在文件夹里打开终端执行以下命令：
   • 初始化项目：npm init -y
   • 安装依赖：npm install express axios
3. 在项目根目录新建server.js文件，写入以下代码：

// server.js
const express = require('express');
const axios = require('axios');
const app = express();
const PORT = process.env.PORT || 3000;

// 生产环境一定要用环境变量存密钥，不要硬写！
// 开发阶段可以先临时写在这里，后面换成环境变量
const API_KEY = '你的第三方API密钥';
const THIRD_PARTY_API_URL = '你要调用的第三方API地址';

// 跨域设置（开发阶段允许所有来源，生产环境改成你的前端域名）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 写一个供前端调用的接口
app.get('/api/get-data', async (req, res) => {
  try {
    // 后端用密钥调用第三方API
    const thirdPartyResponse = await axios.get(THIRD_PARTY_API_URL, {
      params: {
        api_key: API_KEY,
        // 如果需要前端传参数，比如搜索关键词，可以用req.query.keyword获取
        // keyword: req.query.keyword
      }
    });
    // 把第三方API返回的数据传给前端
    res.json(thirdPartyResponse.data);
  } catch (err) {
    res.status(500).json({ error: '调用第三方API失败，请稍后重试' });
  }
});

// 托管前端静态文件：把你的HTML/CSS/JS都放在public文件夹里
app.use(express.static('public'));

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器跑在 http://localhost:${PORT}`);
});

第二步：调整前端代码 #

1. 在项目根目录新建public文件夹，把你的myhtml.html、myjs.js、CSS文件都放进去。
2. 修改myjs.js，去掉直接写死的API密钥，改成调用后端接口：

// myjs.js
// 不再存API_KEY，直接调用后端接口
async function initApp() {
  try {
    // 调用自己后端的接口，拿到数据
    const response = await fetch('/api/get-data');
    const data = await response.json();
    
    // 用拿到的数据初始化你的库，或者处理业务逻辑
    initializeLibrary(data); // 这里根据你的库需求调整参数
  } catch (err) {
    console.error('加载数据失败:', err);
  }
}

// 页面加载完成后执行
window.addEventListener('load', initApp);

第三步：运行和部署 #

开发阶段运行 #

在终端执行node server.js，然后打开浏览器访问http://localhost:3000，就能看到你的前端页面，同时前端会通过后端接口拿到第三方API的数据，全程看不到密钥。

生产环境注意事项 #

1. 用环境变量存密钥：安装dotenv包（npm install dotenv），在项目根目录新建.env文件，写入API_KEY=你的密钥，然后在server.js开头加require('dotenv').config();，同时把.env加入.gitignore，绝对不要提交到代码仓库。
2. 跨域设置：把Access-Control-Allow-Origin改成你的前端域名（比如https://your-domain.com），不要用*，防止恶意网站调用你的后端接口。
3. 部署：可以用Vercel、Railway、Netlify这些平台部署，把代码上传，然后在平台的环境变量里设置API_KEY，平台会自动帮你运行后端服务。

关键提醒 #

• 绝对不要尝试在前端隐藏密钥，任何前端代码里的密钥都会被用户轻易拿到，哪怕加密、混淆都没用。
• 如果你只是用某个SDK初始化需要密钥，那这个SDK大概率是设计给后端用的，你需要改成后端调用该SDK的接口，再把结果返回给前端，而不是在前端初始化SDK。

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