如何在DeckGL的Carto Layer请求中隐藏ApiKey？

1. 搭建后端代理服务 #

前端请求不再直接调用Carto官方API，而是先发送到你的后端服务，由后端添加API Key后转发请求到Carto。以Node.js Express为例：

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

// 后端安全存储Carto配置
const CARTO_CONFIG = {
  baseUrl: 'https://maps-api-v2.us.carto.com',
  apiKey: '你的Carto API Key',
  username: '你的Carto用户名'
};

// 代理Carto瓦片请求
app.get('/carto-proxy/*', async (req, res) => {
  try {
    // 拼接目标Carto API地址并加入API Key
    const targetUrl = `${CARTO_CONFIG.baseUrl}${req.params[0]}&api_key=${CARTO_CONFIG.apiKey}`;
    // 转发请求并返回响应
    const response = await axios.get(targetUrl, {
      headers: { 'Accept': 'application/json' },
      responseType: 'stream'
    });
    res.set(response.headers);
    response.data.pipe(res);
  } catch (error) {
    res.status(error.response?.status || 500).send(error.message);
  }
});

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

2. 修改前端CartoLayer配置 #

方式一：覆盖默认API地址 #

移除前端的API Key配置，将请求基础地址指向你的代理服务：

// 替换原有带apiKey的setDefaultCredentials调用
setDefaultCredentials({
  username: environment.carto_account,
  baseUrl: 'http://localhost:3001/carto-proxy' // 你的代理地址
});

// CartoLayer配置保持不变
new CartoLayer({
  type: MAP_TYPES.QUERY,
  pickable: true,
  id: 'countyborders',
  data: `SELECT * FROM ${CARTO.COUNTY_TABLE}`,
  getFillColor: [180,180,180,0],
  stroked: true,
  lineWidthMinPixels: 1,
  getLineColor: [98, 110, 120, 50],
});

方式二：自定义fetch函数 #

如果需要更灵活的请求控制，给CartoLayer传入自定义fetch函数，直接将请求发送到代理地址并清除前端的API Key参数：

// 自定义fetch逻辑
const customCartoFetch = async (url, options) => {
  // 替换Carto官方地址为代理地址
  const proxyUrl = url.replace('https://maps-api-v2.us.carto.com', 'http://localhost:3001/carto-proxy');
  // 移除请求中的api_key参数
  const cleanUrl = proxyUrl.replace(/&api_key=[^&]+/, '');
  return fetch(cleanUrl, options);
};

// 创建CartoLayer时传入自定义fetch
new CartoLayer({
  type: MAP_TYPES.QUERY,
  pickable: true,
  id: 'countyborders',
  data: `SELECT * FROM ${CARTO.COUNTY_TABLE}`,
  getFillColor: [180,180,180,0],
  stroked: true,
  lineWidthMinPixels: 1,
  getLineColor: [98, 110, 120, 50],
  customFetch: customCartoFetch
});

3. 注意事项 #

• 生产环境需给代理服务配置跨域（CORS）规则，允许前端域名访问
• 后端API Key需存放在环境变量等安全位置，禁止硬编码
• 测试时确认前端网络请求中不再出现API Key

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