通过预签名 URL 使用 Next.JS 应用程序访问 S3 中的文件不起作用 - 被 CORS 阻止

Question

我已经为 S3 存储桶中的文件创建了一个预签名 URL，以便在我的应用程序中使用它。当我在浏览器中输入预签名的 URL 或使用curl 在 Powershell 中调用它时，我会直接取回文件，这按预期工作。但是，如果我在应用程序中使用 axios.get （下面的代码）执行相同的操作，我会收到错误，并且无法访问该文件，被 CORS 阻止。

我对AWS非常陌生，但据我了解，S3文档说您也可以通过程序获取文件，而不受策略限制。 “使用预签名 URL 授予对 Amazon S3 中的对象的限时访问权限，而无需更新存储桶策略。预签名 URL 可以在浏览器中输入，也可以由程序使用来下载对象。”

我误解/错误执行了什么？

export async function handleS3(url: string) {
  axios
    .get(url)
    .then((response) => {
      // Hier verarbeiten wir die Antwort vom Server
      console.log('Daten erfolgreich geladen:', response.data);
    })
    .catch((error) => {
      // Fehlerbehandlung, falls die Anfrage fehlschlägt
      console.error('Fehler beim Laden der Daten:', error);
    });
}

这是我在控制台中收到的错误： 从源“http://localhost:3000”访问“预签名 URL”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

Answer 1

1. 进入S3控制台
2. 单击您托管 html 页面的 S3 存储桶
3. 单击 权限，然后滚动并转到 跨源资源共享 (CORS) 部分

您可以在其中查看所选存储桶的 CORS 策略。

如果那里不允许本地主机，则单击 edit 并在那里更新。

CORS 策略看起来像这样，您必须更新 AllowedOrigins

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://www.example.com"
        ],
        "MaxAgeSeconds": 3000
    }
]