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);
              });
          }

错误:

CORS策略阻止了在‘https://mobilads-maps-hosting.s3.amazonaws.com/public/prod/campaign-shoots/204/ll9mqhj3-1066461b5705cbd2a4a074dfa7df12e9.jpg’从源http://localhost:3001‘获取的访问:请求的资源上不存在"Access-Control-Allow-Origin"标头.如果一个不透明的响应满足您的需求,请将请求的模式设置为‘no-CORS’,以便在禁用CORS的情况下获取资源. Network-badcrums.js:134获取https://mobilads-maps-hosting.s3.amazonaws.com/public/prod/campaign-shoots/204/ll9mqhj3-1066461b5705cbd2a4a074dfa7df12e9.jpg Net::Err_FAILED

我try 将CORS策略更改为允许来源中的特定网站URL和开发URL.仍然不起作用.

推荐答案

您必须将模式设置为‘no-CORS’才能请求

Reactjs相关问答推荐

有没有方法覆盖NextJS 14中的布局?

Reaction Native:在初始获取后,Reducer变为未定义

react 派生状态未正确更新

try 在Dockerfile中使用AWS CLI将React构建工件上传到S3时出错

为什么登录错误和密码在创建Reaction-Hook-Form后立即被删除?

无法将react 路由状态从路由传递给子组件

FireBase Reaction Native-在呈现视图之前等待响应

在Reaction中导入';图片&文件夹时出错

Antd V5组件自定义主题

无法通过 fetch 获取数据到上下文中

面临 React 模式中点击外部条件的问题

在reduce()方法上得到NaN

React router v5 仅在生产中不适用于嵌套路由

React js中不记名令牌中的空间问题

从其他组件切换 FieldSet

如何检索包含动态段的未解析路径?

在 Remix 中使用 chartjs 和 react-chartjs-2 会出现错误react-chartjs-2未在您的 node_modules 中找到

react 页面更新

使用 React、Redux 和 Firebase 的无限循环

如何防止 mui x-date-picker 被截断?