Leaflet中fetch加载GeoJSON无网络请求无法渲染的问题排查

只要网络面板查不到对应GeoJSON的请求记录，就和GeoJSON文件本身格式没有任何关系。文件格式错误只会出现在请求成功拿到响应、执行response.json()解析的阶段，请求都未发出的场景下完全轮不到文件格式产生影响。

• 优先确认fetch代码是否真的执行
  这类问题90%的原因是fetch逻辑根本没走到：先看控制台有没有其他JS报错，前置代码报错会直接中断执行，导致后续fetch完全不运行；另外确认fetch代码没有被包裹在不会触发的逻辑里，比如未绑定的事件回调、永远不成立的条件判断块中。
  快速验证方法：在fetch调用前加一行console.log('开始请求GeoJSON')，刷新页面如果控制台没输出这行内容，就顺着已有的报错往上排查即可。
• 检查网络面板的过滤配置
  网络面板默认可能开启了资源类型过滤，比如只展示JS、CSS、图片类请求，或者开启了「仅显示失败请求」开关，会把正常的Fetch请求过滤掉。把过滤选项切到「全部」，清空现有日志后强制刷新页面，再搜索inkogym.geojson关键词确认。
• 确认本地缓存没有生效
  如果是刚添加的fetch逻辑，大概率是浏览器缓存了旧版本的页面脚本，新代码没加载。按Ctrl+F5（Windows）/Cmd+Shift+R（Mac）强制刷新绕过本地缓存再测试。

等你能在网络面板看到对应GeoJSON请求后，再按状态排查对应问题：

• 状态码404：检查文件URL是否正确、CDN上的文件是否被删除
• 控制台报CORS跨域错误：需要给CDN存储的GeoJSON配置跨域访问响应头
• 请求返回200但JSON解析报错：此时才是GeoJSON本身格式问题，把返回的内容复制到GeoJSON校验工具排查语法错误即可

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