我从 S3 存储桶下载图像时收到错误

Question

S3 存储桶 CORS 配置：

        [
            {
                "AllowedHeaders": [
                    "*"
                ],
                "AllowedMethods": [
                    "GET",
                    "HEAD",
                    "PUT",
                    "POST",
                    "DELETE"
                ],
                "AllowedOrigins": [
                    "*",
                    "https://performance.mobilads.co"
                ],
                "ExposeHeaders": [
                    "x-amz-server-side-encryption",
                    "x-amz-request-id",
                    "x-amz-id-2",
                    "ETag"
                ],
                "MaxAgeSeconds": 3000
            }
        ]

我的下载图片代码：

        downloadImages = (s3Url) => {
            const urlParts = s3Url.split('/');
            const imageName = urlParts[urlParts.length - 1];
            fetch(s3Url, {
              method: 'GET'
            })
              .then(res => {
                if (!res.ok) {
                  throw new Error(`Failed to fetch: ${res.status} ${res.statusText}`);
                }
                return res.blob();
              })
              .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = imageName;
                document.body.appendChild(a);
                a.click();
                setTimeout(
                  _ => { window.URL.revokeObjectURL(url); },
                  60000);
                a.remove();
              })
              .catch(err => {
                console.error('Error fetching image: ', err);
              });
          }

错误：

从来源“http://localhost:3001”获取“https://mobilads-maps-hosting.s3.amazonaws.com/public/prod/campaign-shoots/204/ll9mqhj3-1066461b5705cbd2a4a074dfa7df12e9.jpg”的访问权限已已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。 network-breadcrumbs.js:134 GET https://mobilads-maps-hosting.s3.amazonaws.com/public/prod/campaign-shoots/204/ll9mqhj3-1066461b5705cbd2a4a074dfa7df12e9.jpg net::ERR_FAILED

我尝试将 CORS 策略更改为“允许来源”中的特定网站 url 和开发 url。还是不行。

Answer 1

您必须将模式设置为“no-cors”才能请求