S3 文件的 PDF.js CORS 问题

Posted 2023-03-04

【中文标题】S3 文件的 PDF.js CORS 问题

【英文标题】：PDF.js CORS issue for S3 file

【发布时间】：2014-09-26 02:04:53

【问题描述】：

我正在尝试使用 PDF.js 1.0.571 查看托管在 S3 存储桶上的 PDF。但是，我收到以下错误：

来自a similar issue的工作JSBin： http://jsbin.com/pdfjs-helloworld-v2/7086/edit

JSBin 不工作： http://jsbin.com/pdfjs-helloworld-v2/10562/edit

我的 S3 CORS 设置：

用于测试的 S3 PDF：http://sheethub.s3.amazonaws.com/sheets/0b26b42aa027c6b73855feb68b8c089e893f8114/original/another_guldove.pdf?1407157315

我的 CORS 设置有误吗？我在这里想念什么？ http://sheethub.s3.amazonaws.com 和 http://s3.amazonaws.com/sheethub 有区别吗？

【问题讨论】：

你找到方法了吗？我现在遇到同样的问题！另外，你为什么要问这两个网址之间的区别？

不幸的是，我没有。这两个 URL 的行为方式似乎有所不同。

我也看到了同样的问题 :(

【参考方案1】：

您需要在服务器上启用 CORS。它基本上是通过将以下标头添加到您的 Web 服务器的输出来完成的：

访问控制允许凭据：true 访问控制允许方法：GET 访问控制允许来源：http://www.yourdomain.com

您可以在此处阅读有关类似案例的更多信息： http://flexpaper.devaldi.com/questions-and-answers.jsp?qa=1560/remote-hosted-pdfs-not-being-displayed-stuck-loading

【讨论】：

问题是关于 S3 并且 OP 已经完成了 CORS 配置

【参考方案2】：

对于仍然面临这个问题并登陆这里的人：

在您的 S3 CORS 配置中使用此配置。 按照this link 上的说明更新您的 CORS 配置。不要忘记保存。

<!-- Sample policy -->
<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

<AllowedMethod>HEAD</AllowedMethod> 与众不同。

【参考方案3】：

就像我一样，如果有人花几天时间在上面。

即使在 s3 上设置了 cors

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

现在是数组格式：

[
   
      "AllowedHeaders":[
         "*"
      ],
      "AllowedMethods":[
         "HEAD",
         "GET"
      ],
      "AllowedOrigins":[
         "*"
      ]
   
]

an 不适用于 pdf.js 或任何 javascript 代码。

只需在url中添加一个额外的参数，例如。

Case-1:
    var url = "https://xxxx.xxx.xxxxx?token=yyy";
    url = url + '&origin='+ window.location.host;

Case-2:
    var url = "https://xxxx.xxx.xxxxx";
    url = url + '?origin='+ window.location.host;

【讨论】：

好的，我解决了我的问题。我做了你写的，但不得不从我的 S3 调用另一个 PDF。我的浏览器没有刷新标题。谢谢

@phenric 很高兴看到它有帮助:)

这里所谓的“数组格式”是 S3 所期望的 JSON 格式。非常适合我。

添加origin 路径参数就像魅力一样。❤

@hashinclude72 我相信这个答案会挽救许多人的生命。我花了大约一周的时间才弄清楚。很高兴它有帮助:)