ng2-pdf-viewer CORS 问题答案

【问题标题】：ng2-pdf-viewer CORS issuesng2-pdf-viewer CORS 问题
【发布时间】：2018-03-06 08:18:38
【问题描述】：

我正在开发一个需要显示 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：无法克隆无法获取。

我的代码

component.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
  }
}

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

【问题讨论】：

我也遇到了同样的问题，你找到了吗？
好吧。我发布了与 Github 问题 here 相同的问题。看起来像基本的 CORS，阻止跨域请求。有关详细信息，请参阅this 链接。
有人找到解决方案了吗？

标签： angular cors

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我在本地没有收到这个错误，但是当我将它部署到服务器上时，只有我遇到了这个错误，所以我不得不像这样配置我的 nginx 设置在位置/etc/nginx/sites-available/ 我编辑了我的配置文件并添加了

add_header 'Access-Control-Allow-Origin' '*' always;

在location /media媒体标签中就这样

location /media {
        add_header 'Access-Control-Allow-Origin' '*' always;
        autoindex on;
        alias /path/to/my/media/folder/;
    }

【讨论】：

【解决方案3】：

这里是快速修复。

转到您的 AWS 控制台。
打开 S3 存储桶。
点击“权限”。
转到显示“跨域资源共享 (CORS)”的底部。
点击右上角的编辑按钮。
将下面的 JSON 粘贴到其中并保存。

[ { “允许的标题”：[ “*” ], “允许的方法”：[ “得到”， “邮政”， “删除” ], “允许的起源”：[ “*” ], “ExposeHeaders”：[]， “MaxAgeSeconds”：3000 } ]

【讨论】：