跨域错误因地图瓦片服务未返回Access-Control-Allow-Origin响应头所致；即使img设crossOrigin="anonymous"，若服务端无CORS支持仍无法读取像素，需代理或换用支持CORS的图源。
为什么 fetch 或 XMLHttpRequest 加载地图瓦片会触发跨域错误
浏览器默认禁止脚本从非同源地址（协议、域名、端口任一不同）读取响应内容，而多数公开地图服务（如 OpenStreetMap、高德、腾讯地图的瓦片接口）未在响应头中设置 Access-Control-Allow-Origin: *。即使你只是用 img 标签加载瓦片，一旦后续尝试用 canvas.getContext('2d').getImageData() 读取像素（比如做热力图叠加、自定义着色），就会因“ tainted canvas ”被拒绝——这是跨域资源被画布污染后的安全拦截，不是网络层报错。
用 ![HTML5调用地图跨域访问被拒如何解决【汇总】]()
crossOrigin 属性加载瓦片仍失败的常见原因
给 crossOrigin="anonymous" 是必要但不充分条件。它只在服务器返回了合法 CORS 头时才生效；若服务器没配，请求仍会发出，但图像加载后无法被 canvas 读取，且控制台通常只报 “Tainted canvases may not be exported” 而不提示 CORS 拒绝细节。
- 检查实际响应头：打开 DevTools → Network → 点击某张瓦片请求 → 查看 Response Headers 是否含
Access-Control-Allow-Origin - 部分地图服务（如早期版本高德
https://webrd01.is.autonavi.com/appmaptile）明确不支持 CORS，此时设crossOrigin无效 -
crossOrigin="use-credentials"会携带 cookie，多数地图瓦片服务不接受，反而导致预检失败
绕过前端跨域限制的可行路径
真正能落地的方案只有两类：服务端代理，或改用支持 CORS 的地图源。客户端无法绕过同源策略核心限制。
- 本地开发时用 Webpack/Vite 的
proxy配置，例如 Vite 中写：server: { proxy: { '/tiles': { target: 'https://a.tile.openstreetmap.org', changeOrigin: true } } }，然后前端请求/tiles/0/0/0.png - 生产环境部署反向代理（Nginx/Apache），把
/map-tiles/路径转发到目标瓦片域名，并手动添加响应头：add_header 'Access-Control-Allow-Origin' '*'; - 切换至原生支持 CORS 的图源，例如：
https://tile.openstreetmap.org/{z}/{x}/{y}.png（注意：OSM 官方瓦片有使用政策，需加署名；且不保证高并发可用） - 避免读取像素？如果只是渲染底图，不用 canvas 操作，就完全不需要 CORS —— 直接用
Leaflet / Mapbox GL JS 等库是否自动处理跨域
不会自动解决跨域问题，但封装了适配方式。Leaflet 默认用 canvas 相关 API 就无感；Mapbox GL JS 内部用 WebGL，其纹理加载机制依赖浏览器对跨域图片的支持，所以仍需服务端配合 CORS 或代理。
立即学习“前端免费学习笔记（深入）”；
- Leaflet 中可显式设置
crossOrigin: true（对应crossOrigin="anonymous"），但前提是图源支持 - Mapbox GL JS 的
style.json中 tileset URL 若跨域，必须确保响应头正确，否则控制台报Failed to execute 'texImage2D' on 'WebGLRenderingContext' - 某些国内地图 SDK（如高德 JS API）封装了自有瓦片服务并内建代理逻辑，所以开发者无需操心跨域 —— 但这意味着你无法自由替换底层图源
