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 行为设置以将以下内容列入白名单 headers：（在行为下 -> 编辑 -> 白名单 Headers）

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

专题博客post：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

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

Nextjs static files CORS issue - Causing links to break on version 10.1.4

javascript

caching

amazon-s3

cors

next.js