反应 - 从 s3 获取图像时，请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】反应 - 从 s3 获取图像时，请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：react - No 'Access-Control-Allow-Origin' header is present on the requested resource when fetching the images from s3

【发布时间】：2021-05-30 02:31:02

【问题描述】：

import imageToBase64 from 'image-to-base64';
...

formatImageToBase64 = () => 
   imageToBase64("https://example.s3.ap-southeast-1.amazonaws.com/images/image1") // Path to the image
       .then(
           (response) => 
               console.log(response);
           
       )
       .catch(
           (error) => 
               console.log(error); 
           
       )

当我运行这个函数时，出现如下错误。

Access to fetch at 'example.s3.ap-southeast-1.amazonaws.com/images/image1?AWSAccessKeyId=qwertyuip12344&Expires=1664366635&Signature=aoqogfjfj3%2Foofofol%3D' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

我检查了我的 S3 设置，但似乎没有问题。

我还尝试将 AllowedOrigin 更改为“*”，但仍然无法正常工作。

【问题讨论】：

我会更深入地了解 AllowedOrigins，因为我很确定 localhost 不是您想要的

【参考方案1】：

尝试<AllowedOrigin>*</AllowedOrigin> 而不是您的localhost 并检查它是否有效 - 如果有效，那么您知道问题在AllowedOrigin 规则范围内。

有关如何定义 CORS 的更详细说明，请查看：S3 - Access-Control-Allow-Origin Header

更新：我尝试访问您提供的链接，我得到的回报是以下消息“您尝试访问的存储桶必须使用指定的端点进行寻址。请发送所有未来的请求到这个端点”。 您可以通过以下方式跟进：AWS S3: The bucket you are attempting to access must be addressed using the specified endpoint

【讨论】：

本来我用的是*，但是没用