如何在Mapbox GL JS中使用私有Mapbox Tileset？

首先明确问题核心：Mapbox私有Tileset所需的secret Token被官方限制仅可在服务端使用，直接放到前端初始化会触发安全拦截，同时存在密钥泄漏、账户资源被盗用的高风险，以下是两种可保持地图私有性的落地方式：

方案1：后端代理转发瓦片请求（最稳妥，推荐） #

通过自己的后端服务代理所有私有瓦片的访问请求，高权限secret Token仅保存在服务端，完全不暴露到前端，同时可自定义访问控制规则。

• 前端配置私有瓦片源时，直接填写你自己的代理接口地址，不需要携带任何Mapbox密钥

  // 前端Mapbox GL JS 瓦片源配置示例
  map.addSource('private-tileset', {
    type: 'vector', // 栅格瓦片对应修改为'raster'
    tiles: ['https://你的服务域名/proxy-mapbox-tiles/{z}/{x}/{y}'],
    minzoom: 0,
    maxzoom: 14
  })
  

• 后端代理逻辑示例（Node.js Express为例），可自行添加登录校验、请求限流等权限控制逻辑：

  // 密钥请保存在服务端环境变量，禁止硬编码
  const MAPBOX_SECRET_TOKEN = process.env.MAPBOX_SECRET_TOKEN
  // 你的私有Tileset ID，可在Mapbox Studio中查看
  const PRIVATE_TILESET_ID = '你的账户名.瓦片集ID'
  
  app.get('/proxy-mapbox-tiles/:z/:x/:y', async (req, res) => {
    const { z, x, y } = req.params
    // 此处可添加自定义权限校验，比如校验用户登录态、请求频率
    const mapboxTileUrl = `https://api.mapbox.com/v4/${PRIVATE_TILESET_ID}/${z}/${x}/{y}.vector.pbf?access_token=${MAPBOX_SECRET_TOKEN}`
    const tileRes = await fetch(mapboxTileUrl)
    if (tileRes.ok) {
      res.setHeader('Content-Type', 'application/x-protobuf')
      tileRes.body.pipe(res)
    } else {
      res.status(tileRes.status).send(tileRes.statusText)
    }
  })
  

方案2：后端生成短期限制权限的临时令牌 #

通过Mapbox Tokens API在服务端生成仅可访问指定Tileset、有效期短、绑定访问域名的临时公开令牌，供前端使用。

• 后端用secret Token调用Mapbox Tokens API生成令牌，配置限制规则：仅授予tiles:read权限、绑定你的前端域名、设置有效期不超过1小时
• 前端初始化Mapbox时使用该临时令牌即可，令牌到期后由后端重新生成下发
• 优势是无需代理转发所有瓦片请求，劣势是权限控制粒度依赖Mapbox的令牌规则，不如自定义代理灵活

注意事项 #

• 无论使用哪种方案，绝对禁止将永久secret Token直接暴露到前端，避免密钥泄漏后被滥用你的Mapbox额度、篡改账户资源
• 两种方案均可以保证私有Tileset不会被未授权用户访问，代理方案可自定义的权限控制能力更强，更适合业务有复杂访问规则的场景

内容的提问来源于stack exchange，提问作者J Gi