未经授权的访问 - mapbox：服务器响应状态为401

Question

我正在尝试遵循传单地图教程（使用Mapbox磁贴），以便在我的网页中基本显示地图。我确保创建一个个人令牌并将其替换为tileLayer，因为它已被推荐。但我总是得到'无法加载资源：服务器在控制台中响应状态为401（未授权）'错误。

我的代码与教程中的代码基本相同，只是我添加了生成的令牌：

<html>
<head>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
     
</head>
<body>

 <div id="mapid"></div>
</body>
</html>
<script type="text/javascript">
document.onload = loadMap();

function loadMap() {

  var map = L.map('mapid').setView([51.505, -0.09], 13);


  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={sk.eyJ1IjoiaXFhcmNobGkiLCJhIjoiY2pqZTN1OTNxMGNubDNwbXNhbDNka2J4ZiJ9.UKoT12YRTSSUEnIGHyiScQ}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox-outdoors',
    accessToken: 'sk.eyJ1IjoiaXFhcmNobGkiLCJhIjoiY2pqZTN1OTNxMGNubDNwbXNhbDNka2J4ZiJ9.UKoT12YRTSSUEnIGHyiScQ'
  }).addTo(map);

}

</script>