H5新增crossOrigin属性

最新推荐文章于 2025-02-27 10:15:50 发布

reffrselom

最新推荐文章于 2025-02-27 10:15:50 发布

阅读量727

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/reffrselom/article/details/102778490

版权

本文介绍了在Chrome v77版本中，由于浏览器升级导致的H5地图瓦片底图无法正常显示的问题。通过研究Leaflet文档，发现`crossOrigin`属性可以设置为`true`，使得图片请求带上跨域属性，从而解决获取瓦片像素数据的限制。文章还探讨了可能的原因和H5的`crossOrigin`属性作用，并推荐了相关阅读资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前遇到问题回顾：
leaflet接口初始化栅格底图(protobuf二进制转图片)，因chrome浏览器自动升级至v77版本，栅格底图无法正常显示，(浏览器直接打开可显示图片，pbf请求状态200，控制台报跨域警告，火狐、edge等浏览器正常请求和显示)。
解决过程：

后台栅格图服务已设置允许跨域，前端调用leaflet API接口，无法尝试另外的前端跨域处理
想部署同一台服务器，使其同源，栅格服务是外部提供的jar包，暂无法使其端口一致
查看leaflet文档，发现有个leaflet初始化设置参数crossOrigin，设置为true时，会把请求到的图片都添加上crossOrigin属性，这才解决问题，低版本chrome也ok了，此字段注释解释如下：

在这里插入图片描述

// @option crossOrigin: Boolean|String = false
// Whether the crossOrigin attribute will be added to the tiles.
// If a String is provided, all tiles will have their crossOrigin attribute set to the String pr