Shinylive 导出的静态 HTML 应用中，Leaflet 地图显示为灰色空白，根本原因是浏览器因跨域策略（CORS）阻止了地图瓦片资源加载；通过 runStaticServer() 启动本地服务时，需显式添加 Access-Control-Allow-Origin: * 响应头以允许前端加载外部瓦片服务。
shinylive 导出的静态 html 应用中，leaflet 地图显示为灰色空白，根本原因是浏览器因跨域策略（cors）阻止了地图瓦片资源加载；通过 `runstaticserver()` 启动本地服务时，需显式添加 `access-control-allow-origin: *` 响应头以允许前端加载外部瓦片服务。
当使用 shinylive::export() 将 Shiny 应用打包为静态 HTML 并通过 shinylive::runStaticServer() 本地托管时，Leaflet 地图常出现“灰色占位框”问题——交互功能（如缩放、拖拽）仍存在，但底图瓦片（tiles）完全不显示。这并非代码逻辑错误，而是现代浏览器严格的 跨源资源共享（CORS）策略 所致。
Leaflet 默认调用公共瓦片服务（如 CartoDB.Positron 或 OpenStreetMap），其 URL 形如 https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png。当应用以 file:// 协议或未配置 CORS 头的本地服务器运行时，浏览器会拒绝加载这些外部图片资源，并在开发者工具控制台报错：
Blocked loading resource from “https://a.basemaps.cartocdn.com/...” because it violates Cross-Origin-Resource-Policy.
⚠️ 注意：仅在
中添加 Cross-Origin-Embedder-Policy 或 Cross-Origin-Resource-Policy 元标签无效——这些是响应头（HTTP headers），必须由 Web 服务器在 HTTP 响应中实际发送，HTML 中的 标签无法替代。✅ 正确解决方案是：*在启动 runStaticServer() 时，通过 headers 参数注入 `Access-Control-Allow-Origin: ` 响应头**，从而授权前端跨域请求瓦片资源：
# 正确启动方式：显式启用 CORS 支持
shinylive::runStaticServer(
"./docs",
headers = c("Access-Control-Allow-Origin" = "*")
)
该参数会令内置的 httpuv 服务器在每个响应中附加对应 header，使浏览器允许从 https://a.basemaps.cartocdn.com 等域名加载图片资源。
? 补充建议：
- 若部署到真实 Web 服务器（如 Nginx、Apache 或 GitHub Pages），需在服务器配置中全局设置 Access-Control-Allow-Origin: *（生产环境建议限定具体域名）；
- 避免在生产环境长期使用 *，可改为 Access-Control-Allow-Origin: https://your-domain.com 提升安全性；
- 如仍遇问题，可临时切换为离线可用的瓦片源（如 addTiles(urlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png")），但需确认其 CORS 政策是否宽松；
- shinylive 当前版本（v1.0+）已对部分 CDN 做优化，但仍依赖服务端 CORS 配置。
执行上述修复后，刷新页面，Leaflet 地图将正常加载底图、标记及交互功能，完整复现本地 runApp() 的效果。
