如何在React-Leaflet TileLayer中使用访问令牌且不暴露于前端？

前端直接使用Jawg瓦片服务时，不管用环境变量还是其他方式，令牌都会暴露在前端代码里——因为浏览器能获取到所有前端加载的资源和参数。你考虑的后端中转方案是可行的，也是这类场景的最佳实践之一，具体实现和注意事项如下：

核心方案：后端代理转发瓦片请求 #

通过后端接口作为中间层，由后端持有并在请求Jawg服务时带上令牌，前端只请求后端的代理接口，完全接触不到令牌。

1. 后端实现代理接口 #

以Node.js/Express为例，搭建一个简单的代理接口：

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

// 后端从环境变量读取令牌，不会暴露到前端
const JAWG_ACCESS_TOKEN = process.env.JAWG_ACCESS_TOKEN;

// 代理瓦片请求的接口
app.get('/api/map-tiles/:z/:x/:y', async (req, res) => {
  const { z, x, y } = req.params;
  // 处理 retina 屏幕的瓦片参数
  const retinaSuffix = req.query.r || '';

  try {
    // 转发请求到Jawg的瓦片服务，带上后端持有的令牌
    const tileResponse = await axios.get(
      `https://tile.jawg.io/jawg-sunny/${z}/${x}/${y}${retinaSuffix}.png?access-token=${JAWG_ACCESS_TOKEN}`,
      { responseType: 'stream' }
    );

    // 转发Jawg返回的响应头（比如缓存策略）
    res.set(tileResponse.headers);
    // 将瓦片数据流直接返回给前端
    tileResponse.data.pipe(res);
  } catch (err) {
    res.status(err.response?.status || 500).send('获取瓦片失败');
  }
});

app.listen(3001, () => console.log('地图瓦片代理服务运行在 3001 端口'));

2. 前端修改TileLayer配置 #

把TileLayer的url指向后端的代理接口，不需要在前端携带任何令牌：

import { TileLayer } from 'react-leaflet';

export default function MapTile() {
  return (
    <TileLayer
      url='/api/map-tiles/{z}/{x}/{y}{r}.png'
      attribution='<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    />
  );
}

关键注意事项 #

• 防止接口滥用：后端需要添加访问限制，比如校验请求来源的域名，避免第三方恶意调用你的代理接口消耗Jawg配额。
• 缓存优化：后端可以对瓦片资源设置合理的缓存策略，减少重复请求Jawg服务，降低成本同时提升前端加载速度。
• 合规性检查：确认Jawg的服务条款是否允许这种代理转发模式，避免违反使用协议。

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