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

Posted 2023-03-04

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

【英文标题】：Nextjs static files CORS issue - Causing links to break on version 10.1.4

【发布时间】：2021-09-08 09:04:36

【问题描述】：

我当前的 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 请求。

任何帮助将不胜感激。

【参考方案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

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