Kendo-React-PDF PDF 导出不显示来自 S3 存储桶的图像：“请求的资源上不存在 'Access-Control-Allow-Origin' header”
Kendo-React-PDF PDF Export not displaying image from S3 bucket: “No 'Access-Control-Allow-Origin' header is present on the requested resource”
赏金前编辑： 这是我在 chrome devtools 控制台中收到的错误的屏幕截图：
这是我当前用于我的 S3 存储桶 cbbteamlogos 的确切 CORS 配置：
<?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 存储桶策略是空白的，尽管下面的评论中建议添加存储桶策略，但我不太确定要在此处添加什么。
Here is the Kendo React PDF docs that I have been using to implement this, and here is a part of the docs 讨论使用 Kendo.
绘制图像的局限性
在我下载的 React PDF 中显示来自这个 S3 存储桶的图像非常重要，因为上周我一直在构建这个 PDF 生成组件，并假设我会解决这个问题。
如果我可以分享我的应用程序的任何其他输出、我的 S3 存储桶上的信息等，请告诉我这将有助于解决此问题！
原文Post：
我正在尝试在我的 React 应用程序中创建一个 PDF 生成工具，为此我正在使用 Kendo React PDF。但是，我很难在下载的 PDF 中显示图像。提前道歉，这不是一个可重现的例子，但问题是 high-ish 级别，我不确定一个可重现的例子是否有帮助。
PDF 应该是这样的。
...这是导出 PDF 时的实际样子...
问题是斯坦福标志没有出现在下载的 PDF 中，我不太清楚为什么。我一直在阅读 Kendo 文档，它提到 here 只有在服务器提供宽松的 Cross-Origin HTTP headers 时才会导出图像。
团队徽标保存在我的 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 的斯坦福徽标的 link。
Edit4: 错误信息:
Access to image at 'https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png' from origin 'https://cbbanalytics.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是一张非常大（我如何让它变小？…）的图像，其中包含保存该图像的 S3 存储桶的一些信息。我还用当前的 CORS 配置更新了上面的 post，但它不起作用。 我需要为此制定存储桶策略吗？我可以分享关于 s3 存储桶的任何其他信息来帮助解决这个问题吗？
为了从 S3 返回 cross-origin headers，您似乎需要添加以下属性
crossorigin="anonymous"
添加到您的图片标签。我发现这个埋在一个和你的相似的 answer at this SO Question 里。
因此，在您的 standford 徽标图像标签中 - 您需要添加属性：
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 属性的情况下链接到你的 standford 徽标并得到以下 headers 返回：
将 crossorigin 属性添加到 standford 徽标图像标签后，我得到以下信息：
希望对您有所帮助。
这对我有用
<Image style={styles.image} source={{ uri: logoUrl, method: "GET", headers: { "Cache-Control": "no-cache" } }} />
赏金前编辑： 这是我在 chrome devtools 控制台中收到的错误的屏幕截图：
这是我当前用于我的 S3 存储桶 cbbteamlogos 的确切 CORS 配置：
<?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 存储桶策略是空白的，尽管下面的评论中建议添加存储桶策略，但我不太确定要在此处添加什么。
Here is the Kendo React PDF docs that I have been using to implement this, and here is a part of the docs 讨论使用 Kendo.
绘制图像的局限性在我下载的 React PDF 中显示来自这个 S3 存储桶的图像非常重要，因为上周我一直在构建这个 PDF 生成组件，并假设我会解决这个问题。
如果我可以分享我的应用程序的任何其他输出、我的 S3 存储桶上的信息等，请告诉我这将有助于解决此问题！
原文Post：
我正在尝试在我的 React 应用程序中创建一个 PDF 生成工具，为此我正在使用 Kendo React PDF。但是，我很难在下载的 PDF 中显示图像。提前道歉，这不是一个可重现的例子，但问题是 high-ish 级别，我不确定一个可重现的例子是否有帮助。
PDF 应该是这样的。
问题是斯坦福标志没有出现在下载的 PDF 中，我不太清楚为什么。我一直在阅读 Kendo 文档，它提到 here 只有在服务器提供宽松的 Cross-Origin HTTP headers 时才会导出图像。
团队徽标保存在我的 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 的斯坦福徽标的 link。
Edit4: 错误信息:
Access to image at 'https://s3.amazonaws.com/cbbteamlogos/STAN-logo.png' from origin 'https://cbbanalytics.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是一张非常大（我如何让它变小？…）的图像，其中包含保存该图像的 S3 存储桶的一些信息。我还用当前的 CORS 配置更新了上面的 post，但它不起作用。 我需要为此制定存储桶策略吗？我可以分享关于 s3 存储桶的任何其他信息来帮助解决这个问题吗？
为了从 S3 返回 cross-origin headers，您似乎需要添加以下属性
crossorigin="anonymous"
添加到您的图片标签。我发现这个埋在一个和你的相似的 answer at this SO Question 里。
因此，在您的 standford 徽标图像标签中 - 您需要添加属性：
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 属性的情况下链接到你的 standford 徽标并得到以下 headers 返回：
将 crossorigin 属性添加到 standford 徽标图像标签后，我得到以下信息：
希望对您有所帮助。
这对我有用
<Image style={styles.image} source={{ uri: logoUrl, method: "GET", headers: { "Cache-Control": "no-cache" } }} />