从签名的 S3 URL 获取数据：`不存在 'Access-Control-Allow-Origin' 标头`

Posted 2023-03-04

【中文标题】从签名的 S3 URL 获取数据：`不存在 \'Access-Control-Allow-Origin\' 标头`

【英文标题】：Getting data from signed S3 URL giving: `No 'Access-Control-Allow-Origin' header is present`从签名的 S3 URL 获取数据：`不存在 'Access-Control-Allow-Origin' 标头`

【发布时间】：2020-08-27 12:54:50

【问题描述】：

我的 S3 存储桶上的 Cors 设置已经搞砸了几个小时，现在是时候寻求帮助了。我正在尝试从我在后端生成的签名 URL 加载一些数据并将其显示在反应应用程序中。我在前端尝试的一切似乎都产生了相同的结果：blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我在 S3 中的 Cors 配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

注意：只需将签名的 URL 粘贴到 chrome 中就可以很好地下载我的数据，并且在邮递员中进行调用是相同的。出于某种原因，如果我通过我的 react 应用程序拨打电话，CORS 只会给我带来问题。非常感谢所有帮助！

【问题讨论】：

它只会在 React 中失败，因为 CORS 仅在某些情况下被“激活”，例如从网页上运行的 javascript 脚本（而不是在 Node 中运行的 JS）。它是一种可选协议，请参阅w3.org/TR/cors：“用户代理通常对网络请求应用同源限制。这些限制会阻止从一个源运行的客户端 Web 应用程序获取从另一个来源.. 用户代理验证请求来源的值和来源匹配。” （错误是由 JavaScript 请求引发的。。）

因此，在 Postman 中，验证标题是否确实存在 [或不存在]。指定浏览器发送的任何 Origin 标头。另请参阅开发者工具中发送的标头。

啊，是的，看起来 Postman 中不存在标题。你觉得我上面的 S3 cors 政策有什么问题吗/这是否不足以添加它们？

即使我在尝试从 UI 直接请求签名 URL 时也遇到了同样的问题。最后在 express 中创建了一个文件上传 api，并从 Node 端而不是 React 端处理 s3 上传。

【参考方案1】：

好的，已经解决了。问题归结为请求中的“Origin”标头留空，因此无论<AllowedOrigin>*</AllowedOrigin>如何，预检测试都返回失败。

对于遇到同样问题的任何人，我建议您查看网络选项卡并确保存在正确的请求标头。