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”标头。因此，不允许来源“htt：// localhost：4200”。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用CORS的资源。

core.es5.js：1020 ERROR错误：未捕获（在承诺中）：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>

component.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来解决。

转到AWS Console S3，然后转到您的存储桶
转到权限=> CORS配置
例如，在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

Answer 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/;
    }

Answer 3

这是快速修复。

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

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

ng2-pdf-viewer CORS问题

3 个答案: