时间戳

首页 > 解决方案 > 被 CORS 策略阻止：从 Amazon S3 调用图像时没有“Access-Control-Allow-Origin”标头

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

问题描述

我正在尝试将网页导出为 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 并绕过此错误吗？

标签： reactjsamazon-s3corspdf-generationjspdf

解决方案

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

推荐阅读