CloudFront+S3配置CORS后仍出现浏览器跨域错误求助

一、先修正客户端代码里的冲突配置 #

• 直接删掉"Sec-Fetch-Mode": "no-cors"请求头：这个头是浏览器自动生成的，手动设置会打乱正常CORS流程，而且no-cors模式和withCredentials: true完全冲突——带凭证的请求必须用cors模式，还要求服务端不能用通配符*作为允许的源。
• 无需身份验证就去掉withCredentials: true：你的图片是公开访问的，没必要带凭证，留着反而会触发更严格的CORS校验。

修正后的代码示例：

panoramaViewer = new Viewer({
    container: viewerElement,
    panorama: imageURL,
    requestHeaders: {
        Origin: "https://toscanini.me",
    },
    // withCredentials: true, // 不需要就注释或删除
});

二、检查CloudFront的关键配置项 #

1. 确保转发Origin头到S3：
   进入CloudFront控制台，找到对应分发，编辑/*的行为规则，在「缓存键和源请求」部分，选择包含转发Origin头的源请求策略——比如官方的CORS-S3Origin，它会自动转发Origin、Access-Control-Request-Method等CORS必需的请求头。
2. 将Origin加入缓存键：
   使用官方的Managed-CORS-S3缓存策略，或者自定义策略把Origin添加到缓存键中，否则CloudFront会缓存不带CORS头的响应，导致后续请求无法拿到正确的跨域头。
3. 重新执行全量缓存失效：
   失效路径填/*，等待几分钟让缓存彻底清理完成。

三、S3 CORS配置调整（仅当需要带凭证时） #

如果确实需要使用withCredentials: true，修改S3的CORS配置，把AllowedOrigins设为具体域名而非通配符*，示例如下：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://toscanini.me"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

四、验证问题是否解决 #

打开浏览器开发者工具的「网络」面板，查看图片请求的细节：

• 确认请求头中包含Origin: https://toscanini.me；
• 确认响应头中存在Access-Control-Allow-Origin（值为你的域名或*）。
  如果响应头仍无该字段，要么是CloudFront未正确转发Origin头，要么是S3的CORS配置尚未生效（等待几分钟再重试即可）。

内容的提问来源于stack exchange，提问作者Santiago Toscanini