Question

我提供了一个URL，在执行时给了我cors问题（访问被拒绝），如果通过leaflet的tilelayer函数访问，并没有给我发现cors问题。只是想了解tileLayer的实现是如何完成的。

据我所知，当来源未列入白名单时，会出现cors问题（拒绝访问），但在这种情况下，tileLayer也应该给我访问拒绝问题，但它能够在地图中加载图块。

我在下面引用了代码来理解实现但是却找不到它如何以不同的方式处理cors问题。任何帮助表示赞赏 https://github.com/Leaflet/Leaflet/blob/master/src/layer/tile/TileLayer.js

Answer 1

TL; DR：Leaflet只操纵DOM，这样做永远不会抛出CORS错误。

Leaflet创建<img> DOM元素，并将它们添加到DOM中。神奇的开始发生在this line of code：

var tile = document.createElement('img');

然后设置src属性，以便该元素看起来像<img src='foo/x/y/z.png'>：

tile.src = this.getTileUrl(coords);

然后，L.GridLayer的功能将<img>元素添加到DOM，over this line：

container.appendChild(tile);

然后将<img>置于某些容器元素中以使其保持在正确的位置，并在加载图像时重置其CSS类，这有点神奇。

Leaflet操纵DOM。 Leaflet 不所做的是通过javascript访问图像信息。换句话说：传单不使用XmlHttpRequest或fetch。

因此，代码在加载资源时不会抛出与CORS相关的错误，因为只有在通过XmlHttpRequest或fetch请求资源时才会发生这种情况。

但是，如果您尝试访问JS代码中的图像数据，则会发现CORS错误（通常这是通过canvas功能完成的，请参阅例如L.TileLayer.GL trying to use a loaded tile as a WebGL texture）。但是在一个基本的情景中，你并没有发生。

另请注意image will fire an error event如果加载失败（由于HTTP错误或其他原因）。反过来，这会使L.TileLayer点燃tileerror event。如果您对查看切片加载错误感兴趣，可能需要使用事件处理程序。