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 属性，它确保所有标签都具有

cross-origin

属性。

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

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

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

并添加 Cloudfront 行为设置以将以下标头列入白名单： （在行为 -> 编辑 -> 白名单标题下）

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

特色博客文章：https://nextjs.org/blog/next-8#new-crossorigin-config-option

关于此主题的有趣讨论：对 CORS 的缓存效果：请求的资源上不存在“Access-Control-Allow-Origin”标头

Answer 2

在带有 Cloudfront 的最新 AWS 中对我有用的是选择“CORS-with-preflight”响应标头策略。

在此输入图片描述