Leaflet tileLayer调用redraw()时触发CORB跨域阻塞错误

突发异常的核心原因 #

• 报错本质是浏览器CORB机制拦截了跨域响应：瓦片请求预期返回图片格式资源，但实际被拦截的响应MIME类型为text/xml，说明瓦片服务端在对应场景下返回的是XML格式的WMS异常报文，而非正常瓦片图片。
• 稳定运行一年后突然触发，通常来自两个变更：一是近期Chromium内核浏览器（Chrome/Edge等）升级了CORB校验规则，此前对图片请求返回非图片类型内容的拦截宽松，现在严格执行拦截；二是瓦片服务端近期做了配置/版本更新，新增了限流、鉴权、参数校验规则，特定场景下会返回错误报文。

自动触发报错、手动执行正常的原因 #

• 浏览器对不同来源的请求执行不同等级的安全校验：在控制台手动调用函数触发的请求，会被判定为用户主动发起的高优先级交互请求，CORB校验、服务端安全规则的拦截阈值都更宽松；而setInterval定时触发、jQuery change事件自动触发的请求属于后台自动发起的非交互请求，安全校验更严格，一旦请求不符合服务端规则就会返回XML错误，进而被CORB拦截。
• 代码本身存在逻辑bug，会放大这个问题：update_tiles函数中修改的是图层列表下标为4的瓦片层地址，但循环执行redraw时仅重绘了下标为0的图层，很容易出现参数拼接错乱、请求地址和目标图层不匹配的问题，触发服务端参数校验错误返回XML。另外直接修改图层实例的私有属性_url本身就不符合Leaflet的API使用规范，很容易出现内部状态不同步的问题。

服务端关联判断 #

• 问题和瓦片请求的目标服务端直接相关：所有CORB拦截的前置条件是服务端返回了不符合图片预期的XML响应，只要抓包看被拦截请求的响应体，就能看到WMS标准格式的错误信息，通常是请求频率超限、鉴权失效、时间参数格式非法、图层不存在这类明确的服务端校验错误。
• 问题和托管前端页面的Web服务器无关：页面初始加载、首次瓦片请求都能正常执行，说明静态页面托管服务没有异常。

修复方向 #

• 先定位服务端返回的具体错误：打开浏览器开发者工具的网络面板，找到被拦截的瓦片请求，查看响应体内的XML报错内容，优先解决服务端侧的问题（比如调整定时刷新间隔避免触发限流、补全自动请求的合法鉴权参数、修正时间参数的拼接格式）。
• 修正前端代码的不规范写法：不要直接修改瓦片层的私有属性_url，使用Leaflet官方提供的setUrl方法更新瓦片地址，该方法会自动同步内部状态并刷新瓦片，不需要手动调用redraw；同时修正update_tiles里的图层下标错误，确保修改地址的图层和实际刷新的图层一致。
  修正后的参考代码：

  function update_tiles(date_string){
      const targetTileLayer = overlayMaps.children[8].children[4].layer;
      // 调用官方API更新地址，自动触发瓦片刷新
      targetTileLayer.setUrl(`http://foo:8008/bar?request=GetGTile&version=1.3.0&service=WMS&CRS=EPSG%3A3857&layer=foobar&tilezoom={z}&tilerow={y}&tilecol={x}&time=${date_string}&{randint}`, {
          randint: generateRandInt
      });
  }
  

• 若确认服务端返回的是正常图片仍触发拦截，检查瓦片服务端的响应头配置，确保瓦片响应的Content-Type为正确的图片类型（如image/png、image/jpeg），不要错误返回text/xml类型。

内容的提问来源于stack exchange，提问作者tmacx