javascript - Nextjs 静态文件 CORS 问题 - 导致链接在版本 10.1.4 上中断

Question

我当前的 Nextjs 应用程序正在从 Cloudfront 中提取其静态文件。 (我在部署时将/static文件夹上传到S3)

自从更新到第 9 版后，我遇到了一个奇怪的问题，我的一些 CSS 文件出现了以下 CORS 错误:

Access to fetch at 'https://xxx.cloudfront.net/assets/_next/static/css/b1a6e8370451b02b15e6.css' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

将Nextjs更新到10.1.4版本后，应用的所有链接都失效了。这与 CORS 问题有关，因为当我在没有 CDN 的情况下部署时一切正常。

S3 和 Cloudfront 都设置为接受 CORS 请求。

我们将不胜感激。

Answer 1

经过大量研究，我发现了以下 Nextjs Prop ，它确保所有标签都具有 cross-origin 属性。

// next.config.js
module.exports = {
  crossOrigin: 'anonymous'
}

此外，请确保将 S3 CORS 权限设置为:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

并添加 Cloudfront 行为设置以将以下 header 列入白名单:(在行为下 -> 编辑 -> 白名单标题)

Access-Control-Request-Headers
Access-Control-Request-Method
Origin

专题博文:https://nextjs.org/blog/next-8#new-crossorigin-config-option

关于这个话题的有趣讨论:Caching effect on CORS: No 'Access-Control-Allow-Origin' header is present on the requested resource