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

Question

我在私人 GitHub 存储库上使用 Astro 创建了一个静态网站。我能够将其连接到 Netlify。一切都很好，我也部署了构建；但是，当我加载主页（index.html，例如，https://example.com/）时，我收到 CORS 错误（我猜是与从 Cloudflare CDN 加载的资产有关）：

从来源“我的域”访问“https://d33wubrfki0l68.cloudfront.net/js/0f2b5ea850b0bc00d0d93eb733c74d30fdfc396f/assets/hoisted.e9f943e8.js”处的脚本已被 CORS 策略阻止：没有“Access-Control-Allow-Origin” ' 标头存在于请求的资源上。

我尝试在项目的根目录（其他配置文件旁边）添加一个

netlify.toml

文件，其中包含以下内容：

[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"

我还尝试将

_headers

文件添加到公共目录（该目录在 index.html 文件旁边构建），其中包含以下内容：

/* 
  Access-Control-Allow-Origin: *

都没有解决问题，我也遇到了同样的错误。顺便说一句，它只在这个页面上，因为我有另一个名为 terminal (https://example.com/terminal) 的页面，它使用了大量的 JavaScript 并且一切正常。

无论如何，我必须手动部署我的网站，而不是将项目连接到 GitHub 存储库，并且无法利用 Netlify 的资产处理（与我现在得到的相比）或自动构建。

我该怎么办？

即使我一开始就告诉 Netlify 不要将这些脚本放在 CDN 上，问题也能解决；因为手动部署

dist

文件夹可以解决问题，而且我真的不需要 CDN，因为我的网站在 GTMetrix stats

方面做得很好

Answer 1

事实证明我所要做的就是将这段代码添加到 Astro 配置文件中（在我的例子中是

astro.config.mjs

）：

import { defineConfig } from 'astro/config';
// other imports

export default defineConfig({
    // other configs

    vite: {
       build: {
          rollupOptions: {
             output: {
                entryFileNames: '[name]-[hash].js',
             },
          },
       },
    },
});

这告诉 Astro 捆绑所有客户端 js 文件并将它们添加到构建目录的根目录（在我的例子中为

dist

），而不是像

assets

或其他子文件夹。