reactjs - 反应 - 从 s3 获取图像时,请求的资源上不存在“Access-Control-Allow-Origin”标头
问题描述
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>*</AllowedOrigin>
代替您的localhost
并检查它是否有效 - 如果有效,那么您知道问题在AllowedOrigin
规则范围内。
有关如何定义 CORS 的更详细说明,请查看:S3 - Access-Control-Allow-Origin Header
更新:我尝试访问您提供的链接,我得到的回报是以下消息“您尝试访问的存储桶必须使用指定的端点进行寻址。请将所有未来请求发送到此端点”。您可以在以下位置跟进:AWS S3:您尝试访问的存储桶必须使用指定的终端节点进行寻址
推荐阅读
- java - 使用嵌套调用编写 Spring Boot 控制器
- javascript - 在为 VSCode 设置启用 shell 设置期间找不到我的包含文件
- javascript - Puppeteer 问题:页面内容更改后,无法按两次相同的按钮(但按钮 ID 没有)
- swift - 需要帮助了解如何使用多级函数调用处理完成处理程序
- sas-macro - SAS 宏读取多个没有标题的原始数据文件并为每个原始数据文件创建多个 SAS 数据集
- function - 如何在 phpMyAdmin 中获得“全屏”常规编辑?
- javascript - 使用正则表达式,以时间格式分隔时间值
- javascript - 如何从 php 获取参数值到 Blade 模态弹出窗口?(Laravel 兰花)
- python - 在 matplotlib 3d 绘图中,plot_wireframe 中的参数 rcount、ccount、rstride 和 cstride 的意义是什么?
- c# - 字段 vs { get;set } vs { get=>field; set=>field = value;} - C# Unity