赏金前的编辑:这是我在 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 中,我不太清楚为什么。我一直在阅读 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 存储桶的任何其他信息来帮助解决这个问题吗?