配置HTTP来源限制后Google Geocoding API报错，如何设置域名限制？

问题原因 #

直接通过浏览器调用Google Geocoding REST API的反向地理编码接口（使用latlng参数）时，不支持搭配带HTTP Referrer限制的API密钥，这是Google的安全策略限制，因此会返回REQUEST_DENIED错误。

解决方案一：改用Google Maps JavaScript API的Geocoder服务 #

这是前端场景下的推荐方案，既符合Google的API使用规范，又能正常启用域名限制的API密钥。

步骤1：启用必要的API #

在Google Cloud Console中，确保已启用：

• Google Maps JavaScript API
• Geocoding API（部分场景依赖）

步骤2：前端代码实现反向地理编码 #

不再直接调用REST接口，而是通过Maps JavaScript API提供的Geocoder类发起请求：

首先加载Maps JavaScript API（替换为你的API密钥）：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

然后编写地理编码逻辑：

// 反向地理编码函数：根据经纬度获取地址
function getAddressFromLatLng(lat, lng) {
  const geocoder = new google.maps.Geocoder();
  const location = new google.maps.LatLng(lat, lng);

  geocoder.geocode({ latLng: location }, (results, status) => {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        console.log('解析到的地址:', results[0].formatted_address);
        // 在这里处理地址结果
      } else {
        console.log('未找到匹配的地址');
      }
    } else {
      console.error('地理编码请求失败:', status);
    }
  });
}

// 调用示例：传入目标经纬度
getAddressFromLatLng(31.2304, 121.4737);

步骤3：正确设置API密钥的域名限制 #

在Google Cloud Console → APIs & Services → Credentials中，选择你的API密钥，配置HTTP Referrer限制：

• 输入你的域名规则，例如：
  • https://your-domain.com/*（允许该域名下所有HTTPS请求）
  • https://your-domain.com/path/*（限制特定路径）
• 注意必须使用完整协议（http://或https://），通配符*用于匹配路径后缀

解决方案二：通过后端转发请求（适合必须用REST API的场景） #

如果一定要使用Geocoding REST API，不能在前端直接调用，需要通过你的后端服务器转发请求，避免暴露API密钥，同时用IP限制保护后端密钥。

步骤1：配置后端API密钥 #

创建一个新的API密钥，设置IP地址限制（只允许你的服务器IP访问），不要设置Referrer限制。

步骤2：后端编写转发接口（以Node.js为例） #

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;

// 后端转发接口
app.get('/api/reverse-geocode', async (req, res) => {
  const { lat, lng } = req.query;
  const serverApiKey = 'YOUR_SERVER_SIDE_API_KEY';
  const googleApiUrl = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${serverApiKey}`;

  try {
    const response = await axios.get(googleApiUrl);
    res.json(response.data);
  } catch (err) {
    res.status(500).json({ error: '请求转发失败', details: err.message });
  }
});

app.listen(PORT, () => {
  console.log(`后端服务运行在端口${PORT}`);
});

步骤3：前端调用后端接口 #

// 前端请求自己的后端接口
fetch(`/api/reverse-geocode?lat=31.2304&lng=121.4737`)
  .then(res => res.json())
  .then(data => {
    console.log('地理编码结果:', data);
    // 处理返回数据
  })
  .catch(err => console.error('请求错误:', err));

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