如何通过Express代理服务器隐藏HERE Map客户端API密钥

问题根源 #

你之前的配置错误在于：直接在前端SDK中传入apikey参数，哪怕指向自定义域名，SDK仍会把密钥拼接到请求URL里发送，导致浏览器网络面板能看到密钥。要隐藏密钥，必须让后端代理完全接管密钥的添加逻辑，前端请求不携带任何敏感信息。

多子域名场景的代理实现方案 #

1. Express代理核心逻辑 #

使用http-proxy-middleware搭建代理，前端所有地图请求发往你的代理服务器，代理服务器自动添加API密钥后转发到对应的HERE子域名服务。

2. 具体实现步骤 #

第一步：搭建Express代理

先安装依赖：

npm install express http-proxy-middleware cors

编写代理代码：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const cors = require('cors');
const app = express();

const HERE_API_KEY = '你的实际API密钥';
app.use(cors()); // 处理跨域

// 代理瓦片服务（支持base/aerial等多子域名）
app.use('/map-tiles', createProxyMiddleware({
  changeOrigin: true,
  router: (req) => {
    // 从前端请求路径提取子域名和服务类型
    // 前端请求格式示例：/map-tiles/1/base/maptile/2.1/...
    const [, , subdomain, serviceType] = req.path.split('/');
    return `https://${subdomain}.${serviceType}.maps.ls.hereapi.com`;
  },
  onProxyReq: (proxyReq) => {
    // 向HERE服务的请求追加API密钥
    const separator = proxyReq.path.includes('?') ? '&' : '?';
    proxyReq.path += `${separator}apikey=${HERE_API_KEY}`;
  }
}));

// 代理矢量瓦片服务
app.use('/vector-tiles', createProxyMiddleware({
  target: 'https://vector.hereapi.com',
  changeOrigin: true,
  pathRewrite: { '^/vector-tiles': '' },
  onProxyReq: (proxyReq) => {
    const separator = proxyReq.path.includes('?') ? '&' : '?';
    proxyReq.path += `${separator}apikey=${HERE_API_KEY}`;
  }
}));

app.listen(3000, () => {
  console.log('代理服务器运行在 http://localhost:3000');
});

第二步：修改前端HERE SDK配置

让SDK请求代理服务器，不再传入密钥：

const domainConfig = {};

// 配置瓦片服务
domainConfig[H.service.tile.Service.CONFIG_KEY] = {
  baseUrl: new H.service.Url('http', 'localhost:3000', 'map-tiles'),
  subdomain: (level, x, y) => {
    // 返回子域名标识（如1-4），和代理逻辑匹配
    return `${(x + y) % 4 + 1}`;
  }
};

// 配置矢量瓦片服务
domainConfig[H.service.omv.Service.CONFIG_KEY] = {
  baseUrl: new H.service.Url('http', 'localhost:3000', 'vector-tiles/v2/vectortiles/core/mc'),
  subdomain: null
};

// 初始化平台，不传入apikey
const platform = new H.service.Platform({
  apikey: '',
  domainConfig: domainConfig
});

3. 关键注意事项 #

• 路径映射一致性：前端请求路径要和代理的路由规则匹配，确保代理能正确识别HERE的子域名和服务类型。
• 生产环境配置：部署时要把代理服务器的域名替换为正式域名，同时确保密钥存储在环境变量中（不要硬编码）：

  const HERE_API_KEY = process.env.HERE_API_KEY;
  

• 请求参数清理：代理服务器可以额外过滤前端请求中的apikey参数，避免意外泄露。

为什么之前的配置无效？ #

你之前在getoptions中设置apikey，会让HERE SDK直接把密钥拼接到请求URL中发送到浏览器，这和直接请求HERE官方域名没有区别——只有让后端代理在转发时添加密钥，前端请求才不会携带敏感信息。

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