如何为React前端安全传递API密钥？（@react-google-maps/api+Express场景）

1. 优先配置API密钥的使用限制（最关键） #

这是降低密钥风险的核心手段，直接在Google Cloud控制台完成设置：

• 限制HTTP引用来源：仅允许你的前端域名（比如https://your-frontend-domain.com/*）使用该密钥，防止他人盗用密钥在其他网站调用服务。
• 限制API服务范围：只勾选你实际需要的服务（比如Maps JavaScript API），避免密钥被用于其他付费API（如Geocoding、Places）造成不必要的开销。

2. 用Express后端代理敏感API请求 #

如果你的业务涉及需要后端处理的Google Maps服务（比如地址解析、地点搜索等），可以通过Express做代理层：

• 前端不直接请求Google的API，而是调用你的Express后端接口。
• 后端在请求Google API时携带密钥，全程不让前端接触到密钥。

Express后端代理示例代码 #

const express = require('express');
const axios = require('axios');
const router = express.Router();

// 从环境变量读取密钥（绝对不要硬编码到代码里）
const GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY;

// 代理地址解析请求
router.get('/geocode', async (req, res) => {
  const address = req.query.address;
  try {
    const response = await axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address,
        key: GOOGLE_MAPS_API_KEY
      }
    });
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { error: '请求失败' });
  }
});

module.exports = router;

前端调用代理接口示例 #

const fetchGeocode = async (address) => {
  const response = await fetch(`/api/geocode?address=${encodeURIComponent(address)}`);
  return response.json();
};

3. 针对@react-google-maps/api的密钥处理 #

对于useJsApiLoader必须传入密钥的场景，除了做好上述密钥限制，还可以通过环境变量注入密钥：
在React项目的.env文件中配置：

REACT_APP_GOOGLE_MAPS_API_KEY=your-restricted-key

然后在组件中使用：

import { useJsApiLoader } from '@react-google-maps/api';

const MapComponent = () => {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY
  });

  // 组件渲染逻辑
  if (!isLoaded) return <div>加载中...</div>;
  return <div>地图组件内容</div>;
};

注：REACT_APP_前缀是Create React App的要求，其他React框架可能有不同的环境变量规则，构建时该值会被替换到代码中，但只要做好密钥的来源限制，就无需担心被盗用。

总结 #

• 最有效的安全措施是给API密钥设置严格的使用范围限制。
• 敏感的Google Maps服务请求通过Express代理，避免前端接触密钥。
• 前端必须使用的密钥通过环境变量注入，同时确保密钥的限制规则生效。

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