Astro项目中Vercel Web Vitals无法加载的问题排查

安全阿岳

2026-8-8

Vercel分析服务在Astro项目中的问题排查

Vercel完全支持Astro项目的分析服务，包括Web Vitals功能。你的Web Vitals无法加载的问题，大概率是CSP配置不全或集成方式有误，以下是具体排查和解决步骤：

CSP配置不完整：你当前的CSP仅设置了default-src，但Web Vitals需要额外权限才能正常运行。正确的CSP应包含脚本执行、网络请求和图片加载的相关规则，示例如下：
```
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               script-src 'self' 'unsafe-inline' vitals.vercel-insights.com;
               connect-src 'self' vitals.vercel-insights.com;
               img-src 'self' data: vitals.vercel-insights.com;" />
```
Vercel的Web Vitals脚本需要unsafe-inline权限执行内联逻辑，同时要向vitals.vercel-insights.com发送数据请求，部分场景还需允许加载data:协议的图片资源。
未正确集成Vercel Insights脚本：确保在Astro的全局布局文件（如src/layouts/Layout.astro）中嵌入官方的Insights脚本，代码如下：
```
<script defer src="/_vercel/insights/script.js"></script>
```
该路径是Vercel部署后自动生成的端点，本地开发时可能无法访问，但部署到Vercel后会正常生效，缺少这个脚本会导致Web Vitals数据无法采集。
未触发完整部署：在Vercel控制台启用Web Vitals开关后，需要手动触发一次完整重新部署（而非增量部署），确保新的分析配置被应用到项目中。
浏览器隐私工具干扰：除了广告拦截器，浏览器的严格跟踪保护、隐私沙箱设置或其他安全扩展也可能阻止脚本运行。可以尝试在浏览器隐身模式下测试Web Vitals是否正常加载。