反应传单未加载瓷砖和镀金 403 请求错误

Question

我正在使用 react-leaflet 与磁贴供应商 Stadia OSM Bright。当我在本地运行它时显示图块但是当我构建并上传到服务器时它停止加载图块并开始发出请求 403 禁止错误。我有一个 API 密钥，但没有找到将它放入组件的任何解决方案。这是一个代码示例

render() {
const headeris = {"Authorization": "Stadia-Auth "+this.state.authkey}
return (
  <LeafletMaps
    center={[this.state.lat, this.state.lng]}
    zoom={12}
    maxZoom={17}
    attributionControl={true}
    zoomControl={true}
    doubleClickZoom={true}
    scrollWheelZoom={true}
    dragging={true}
    animate={true}
    easeLinearity={0.5}
  >
    <TileLayer 
    url="https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png"
    attribution= '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    />
    {this.state.markers.map((position, index) => (
      <Marker
        key={`marker-${index}`}
        position={[position[0][4], position[0][5]]}
      >
        <Popup>
          <p>{position[0][0]}</p>
          <a href={`/admin/calender/${position[0][2]}`}>Book now</a>
        </Popup>
      </Marker>
    ))}
  </LeafletMaps>
);

Answer 1

其他人部分 如前所述，如果不是本地开发，您需要首先注册以获得 API 密钥。从你的问题中我可以看出你已经做到了这一点，并且询问在获得钥匙后将钥匙插入哪里。

注册后您可以

• 使用显示的仪表板将您的网站域添加到 Stadia 白名单

• 但是，如果像我一样您没有使用特定的网站或位置，您可以将API 密钥附加到 URL。?apikey=注意： Stadia 选择使用下划线，而不是通常的语法?api_key=（这也让我感到困惑！）。

这意味着您需要按以下方式更改代码才能使其正常工作：

<TileLayer 
    url="https://tiles.stadiamaps.com/tiles/osm_bright/
    {z}/{x}/{y}{r}.png?api_key=your_api_key_goes_here"
   
<... rest of code ...>

希望这应该能解决您的问题 - 良好的黑客攻击！

Answer 2

一般描述和替代解决方案（有关 Api 插入的相当完整的解决方案，请参阅下面的 user2589273 答案），我一开始也被骗了，但现在全部解决了。正如 Stadia Maps 在其 Api 键页面中所述，“您可以开始本地开发，无需任何努力或成本。您可以立即开始使用在本地主机或 127.0.0.1 上运行的 Web 服务器。一旦准备好部署，您就可以可以免费注册”。请参阅https://docs.stadiamaps.com/#api-keys，因此如果您在生产中使用它，您需要注册，他们有一个免费计划（非商业广告每天最多 2500 个请求）。请注意，您不需要 api 密钥，因为他们有另一个解决方案，包括提供您的域名，以便他们可以跟踪您的流量。