如何解决react-leaflet中Content-Security-Policy图片加载错误

安全阿岳

2026-7-27

解决思路

先查实际生效的CSP规则：打开浏览器F12进入「网络」面板，刷新页面后查看主文档的响应头，如果存在Content-Security-Policy字段，说明服务器端的CSP配置优先级高于你在index.html里加的meta标签，得修改服务器端的CSP，把图片所在域名加到img-src指令里。
单独声明img-src指令：在你的meta标签里明确添加img-src规则，把报错的图片URL对应的域名加进去，比如报错的是OpenStreetMap的瓦片，就改成这样：
```
<meta http-equiv="Content-Security-Policy" content="
      worker-src blob:; 
      child-src blob: gap:;
      img-src 'self' blob: data: https://tile.openstreetmap.org;
      default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
```
不要依赖default-src的通配符，因为CSP里子指令（比如img-src）如果有单独规则会覆盖default-src的设置。
检查meta标签的有效性：确认index.html里的meta标签没有语法错误，比如引号是否配对、指令末尾是否带分号，还可以在浏览器「元素」面板里查看这个meta标签是否被正确渲染，有没有被其他代码意外移除。
确认图片来源：搞清楚报错的<URL>具体是哪个域名的资源，比如react-leaflet默认加载的地图瓦片、标记图标等，把这些域名准确加入img-src，生产环境尽量避免用通配符*，测试环境可临时使用。