使用 fetch 方法从 AWS S3 下载文件会引发 CORS 错误答案

【问题标题】：Download file from AWS S3 using fetch method throws CORS error使用 fetch 方法从 AWS S3 下载文件会引发 CORS 错误
【发布时间】：2021-05-08 12:19:24
【问题描述】：

我将以下 s3 配置添加到我的 AWS S3 存储桶 cors 设置中。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://*.herokuapp.com"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

现在当我尝试使用下面的 JS 读取它时，我遇到了错误。

async function covertToBlob(url) {
  // https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
  const resp = await fetch(url, {
    credentials: 'include',
  });
  const blobVal = await resp.blob();
  return blobVal;
}

错误是：

访问获取 'https://dhdhddh.s3.amazonaws.com/docs/attachment/6f56abfe-a355-44b9-b728-a642f661a8e7/file/3ed4e889-e139-4755-81e9-5383310e07e7/remote_sounding_system_Hanla.pdf' 来自原产地“http://localhost:3000”已被 CORS 政策阻止：响应中“Access-Control-Allow-Origin”标头的值当请求的凭证模式为 '包括'。

你能给我一些关于如何解决这个问题的想法吗？

【问题讨论】：

标签： javascript amazon-s3 cors fetch

【解决方案1】：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#sending_a_request_with_credentials_included

注意：Access-Control-Allow-Origin 禁止对带有凭据的请求使用通配符：'include'。在这种情况下，必须提供确切的来源；即使您使用的是 CORS 解锁器扩展程序，请求仍然会失败。

这意味着AllowedOrigins 的值不得包含任何通配符。您必须指定准确来源。

这是根据 Fetch API 规范。

【讨论】：

CORS 规则中的意思？我可以在不更改 CORS 规则的情况下更改 JS 以使其工作吗？
是的，在 S3 存储桶的 CORS 规则中。通过 JS 更改它的唯一方法是不使用credentials: 'include'，在这种情况下浏览器不会在跨域调用中发送凭据。
如果我不使用credentials: 'include' 选项，那么我会得到403。
好吧，在这种情况下，您调用的端点显然需要提交凭据。就像我说的那样，唯一使用 Fetch API 进行跨域请求的方法是配置您的源（在本例中为 S3 存储桶）以允许您的引用域在其 AllowedOrigins CORS配置。存储桶必须包含 Fetch 请求来自的显式域，并且不得在其中使用任何通配符。
是的，你是对的。一旦我添加了原点，它就开始工作了。谢谢你的时间。后来你让我做的事情才有意义。我变老了。 -_-