ng2-pdf-viewer CORS 问题

Question

我正在开发一个需要显示 PDF 文件的 Angular 应用程序。为了实现这一点，我目前正在使用 [ng2-pdf-viewer][1] 组件。该组件适用于以下文件：

• https://www.tutorialspoint.com/angular2/angular2_tutorial.pdf

但是，我确实遇到了诸如以下文件的 CORS 问题：

• https://frontendmasters.com/assets/resources/lukasruebbelke/better-apps-angular-2-day1.pdf

我收到的错误消息：

无法加载 htt://frontendmasters.com/assets/resources/lukasruebbelke/better-apps-angular-2-day1.pdf：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'htt://localhost:4200'。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

core.es5.js:1020 错误错误：未捕获（承诺）：DataCloneError：无法在“Worker”上执行“postMessage”：TypeError：无法克隆无法获取。错误：无法在“Worker”上执行“postMessage”：TypeError：无法克隆无法获取。

我的代码

组件.html

<pdf-viewer
    [src]="document.url.url"
    [page]="1"
    [original-size]="false"
    style="display: block;">
  </pdf-viewer>

组件.ts

document = {
name: 'Angular 2',
description: 'An amazing Angular 2 pdf',
url: {
  url: 'https://frontendmasters.com/assets/resources/lukasruebbelke/better-apps-angular-2-day1.pdf',
  withCredentials: true
  }
}

如果您希望我提供任何其他信息，请告诉我。

Answer 1

对于使用AWS S3的人来说，这个问题可以通过配置CORS来解决。

1. 转到 AWS 控制台 S3，然后转到您的存储桶
2. 转到权限=> CORS 配置
3. 例如，在 CORS 配置编辑器中编辑 CORS 规则

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

有关更多信息 https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html