Astro静态站点部署至Netlify后出现CORS错误

问题核心 #

你遇到的CORS错误并非源于自己站点的响应头配置，而是Netlify自动构建时将脚本上传至Cloudflare CDN（d33wubrfki0l68.cloudfront.net），但该CDN资源未配置允许你域名的Access-Control-Allow-Origin头，导致浏览器拦截。手动部署dist文件夹时使用的是Netlify原生托管节点，因此无跨域问题。

解决方案 #

1. 关闭Netlify资源优化（最直接）

Netlify的资源优化默认会将静态资源转存至Cloudflare CDN，关闭后即可避免跨域：

• 登录Netlify后台，进入你的站点设置
• 找到 Build & deploy → Post processing → Asset Optimization
• 禁用所有资源优化选项（Bundle CSS、Minify CSS、Bundle JS、Minify JS）
• 重新触发自动构建

2. 配置Astro强制生成相对资源路径

修改astro.config.mjs，让Astro构建时生成相对路径的资源引用，避免Netlify替换为CDN地址：

export default defineConfig({
  build: {
    assetsPrefix: './',
  },
});

3. 检查主页特殊资源引用

仅主页出现问题，说明主页可能存在特殊脚本引用：

• 检查主页Astro组件，确认是否有第三方脚本或Astro自动hoist的脚本被异常处理
• 手动为主页的脚本添加crossorigin属性，尝试绕过CORS拦截：

  <script src="/assets/hoisted.e9f943e8.js" crossorigin="anonymous"></script>
  

验证 #

修改完成后，触发Netlify自动构建，访问主页即可确认CORS错误是否消失。

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