如何在浏览器POST请求中隐藏API Key？

直接在浏览器端请求第三方API时，API Key必然会通过开发者工具暴露，唯一安全的方式是通过自己的Node.js后端作为代理层转发请求，把API Key存放在后端环境中，前端只与你的后端交互。

步骤1：搭建Node.js后端代理服务 #

1. 初始化项目并安装依赖：

npm init -y
npm install express cors node-fetch dotenv

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

require('dotenv').config();
const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');

const app = express();
app.use(cors());
app.use(express.json());

// 处理前端的POST请求
app.post('/api/vehicle', async (req, res) => {
  try {
    const { plate } = req.body;
    if (!plate) {
      return res.status(400).json({ error: '请提供车牌号码' });
    }

    // 调用第三方API
    const response = await fetch('https://driver-vehicle-licensing.api.gov.uk/vehicle-enquiry/v1/vehicles', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-api-key': process.env.VEHICLE_API_KEY // 从环境变量读取API Key
      },
      body: JSON.stringify({ registrationNumber: plate })
    });

    const data = await response.json();
    res.status(response.status).json(data);
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: '服务器内部错误' });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

3. 创建.env文件存储API Key（不要提交到版本控制系统）：

VEHICLE_API_KEY=你的实际API Key
PORT=3000

步骤2：修改前端代码，请求自己的后端接口 #

把原来的前端startFetch函数修改为请求你的后端地址：

const searchBtn = document.getElementById("search-btn")

function startFetch() {
  let plate = document.getElementById("plate").value.trim();
  if (!plate) {
    alert('请输入车牌号码');
    return;
  }

  fetch(`http://localhost:3000/api/vehicle`, {
    method: 'POST', 
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ plate }),
  }) 
  .then(response => response.json())
  .then(response => {
    console.log(response);
    // 这里可以处理返回的车辆数据，比如渲染到页面
  })    
  .catch(err => {
    console.log(err);
    alert('查询失败，请稍后重试');
  });
}

searchBtn.addEventListener("click", startFetch);

关键注意事项 #

• 永远不要在前端代码中硬编码API Key：任何前端代码都可以被用户查看，硬编码等于直接泄露密钥。
• 使用环境变量管理敏感信息：后端的API Key通过.env文件存储，配合dotenv包读取，避免代码泄露。
• 处理跨域问题：后端使用cors中间件允许前端跨域请求，部署时可以限制允许的域名，提升安全性。
• 错误处理：前后端都要做参数校验和错误捕获，提升用户体验。

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