3

赏金前的编辑:这是我在 chrome devtools 控制台中收到的错误的屏幕截图:

在此处输入图像描述

这是我目前用于 S3 存储桶的确切 CORS 配置cbbteamlogos

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我的 S3 存储桶策略是空白的,我不太确定要在此处添加什么,尽管下面的评论中建议添加存储桶策略。

这是我用来实现此功能的 Kendo React PDF 文档,这里是文档的一部分,讨论了使用 Kendo 绘制图像的限制。

在我下载的 React PDF 中显示来自这个 S3 存储桶的图像非常重要,因为上周我一直在构建这个 PDF 生成组件,并假设我会解决这个问题。

请让我知道我是否可以分享我的应用程序的任何其他输出、我的 S3 存储桶上的信息等,这将有助于解决这个问题!

原帖

我正在尝试在我的 React 应用程序中创建一个 PDF 生成工具,为此我正在使用 Kendo React PDF。但是,我很难在下载的 PDF 中显示图像。提前道歉,这不是一个可重现的例子,但问题是高水平的,我不确定一个可重现的例子是否会有所帮助。

这是 PDF 的外观。

在此处输入图像描述 ...这是导出 PDF 时的实际样子...

在此处输入图像描述

问题是斯坦福徽标没有出现在下载的 PDF 中,我不太清楚为什么。我一直在阅读 Kendo 文档,它在这里提到只有在服务器提供允许的跨域 HTTP 标头时才会导出图像。

团队徽标保存到我的 S3 存储桶中(在编辑中更新了上面的 CORS 配置),但是 CORS 配置似乎没有帮助。是否有其他有使用 Kendo-React-PDF 经验的人对如何在下载的 PDF 中显示图像有任何建议?我不太确定还能做些什么来解决这些错误。

谢谢!

编辑: https://c2.staticflickr.com/2/1574/25734996011_637430f5d8_c.jpg正确导出到 PDF 的横向图像的来源,并且https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png是指向未导出到 PDF 的斯坦福徽标的链接。

编辑4:错误消息:

CORS 策略已阻止从源“ https://cbbanalytics.com ”访问“ https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png ”上的图像:否“Access-Control-Allow-Origin” ' 请求的资源上存在标头。

这是保存图像的 S3 存储桶的一些信息的非常大的图像(我如何使这个变小?...)。我还使用当前的 CORS 配置更新了上面的帖子,但该配置不起作用。我需要为此制定存储桶策略吗?我可以分享有关 s3 存储桶的任何其他信息来帮助解决这个问题吗?

在此处输入图像描述

4

2 回答 2

2

为了从 S3 获取跨域标头,您似乎需要添加以下属性

crossorigin="anonymous"

到您的图像标签。我发现这隐藏在与您的类似的这个SO Question的答案中。

因此,在您的斯坦福徽标图像标签中 - 您需要添加以下属性:

crossorigin="anonymous"

换句话说,如果之前,您的 img 标签是:

<img src="https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png" />

然后将其更改为:

<img src="https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png" crossorigin="anonymous" />

证明

我写了一个小的 index.html 并在没有 crossorigin 属性的情况下链接到您的斯坦福徽标中,并返回了以下标题:

在此处输入图像描述

将 crossorigin 属性添加到斯坦福徽标图像标签后,我得到以下信息:

在此处输入图像描述

希望这可以帮助。

于 2019-07-25T11:58:16.293 回答
1

这对我有用

<Image style={styles.image} source={{ uri: logoUrl, method: "GET", headers: { "Cache-Control": "no-cache" } }} />
于 2020-11-23T15:29:51.947 回答