OpenStreetMap地图CSP配置问题：瓦片图片加载被阻如何解决？

• 问题根源：你的CSP规则中img-src仅设置了'self'，没有明确包含OpenStreetMap瓦片的分发域名，导致浏览器拦截了a.tile.openstreetmap.org这类子域名的瓦片请求。

• 正确的CSP配置：在img-src指令里添加OSM瓦片的通配符域名（覆盖a/b/c等所有分片服务器）：

  Content-Security-Policy: img-src 'self' *.tile.openstreetmap.org;
  

• 扩展配置（多瓦片源场景）：如果你的地图还用到其他第三方瓦片服务，把对应域名也加进去，比如：

  Content-Security-Policy: img-src 'self' *.tile.openstreetmap.org *.tile.thunderforest.com;
  

• 额外提醒：

  • 必须带通配符*，因为OSM的瓦片是通过多个子域名分发的，只写tile.openstreetmap.org会漏掉大部分请求。
  • 要是Leaflet还加载了自定义Marker图标、弹窗图片等资源，记得把这些资源的域名也补充到img-src里；如果涉及脚本或样式加载，还要对应调整script-src、style-src等指令。

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