被 CORS 策略阻止：从 Amazon S3 调用图像时没有“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】被 CORS 策略阻止：从 Amazon S3 调用图像时没有“Access-Control-Allow-Origin”标头

【英文标题】：Blocked by CORS policy: No 'Access-Control-Allow-Origin' header when calling Image from Amazon S3

【发布时间】：2021-01-22 11:21:50

【问题描述】：

我正在尝试将网页导出为 PDF，并且该页面包含来自我们 S3 服务器的图像。当 PDF 被导出时，图像不会出现在 PDF 中。

当我检查浏览器控制台时，我看到以下错误。

Access to image at 'https://skreem2-dev.s3-us-west-2.amazonaws.com/influencers/large-virat-kohli-2retxr.jpg' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已将 S3 存储桶 CORS 政策更新为以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://localhost/</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>http://localhost:3001/</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

知道如何将图像呈现为 PDF 并绕过此错误吗？

【问题讨论】：

确保请求头包含Origin

@jellycsc 这应该在反应中完成吗？有参考吗？

您能发布加载此图像的反应代码吗？

【参考方案1】：

我也遇到过同样的问题。我已将属性 crossorigin="anonymous" 添加到 html 页面中的图像标记中，它解决了我从 s3 存储桶中提取图像时的问题。