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

// 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-交叉原点配置选项

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