ng2-pdf-viewer CORS

See original GitHub issue

I’m developing an Angular application that needs to display PDF files. To achieve this, I’m currenty using the [ng2-pdf-viewer][1] component. The component works fine for files like:

I do however run into CORS-issues with files like:

The error message I receive:

Failed to load http://frontendmasters.com/assets/resources/lukasruebbelke/better-apps-angular-2-day1.pdf: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

core.es5.js:1020 ERROR Error: Uncaught (in promise): DataCloneError: Failed to execute ‘postMessage’ on ‘Worker’: TypeError: Failed to fetch could not be cloned. Error: Failed to execute ‘postMessage’ on ‘Worker’: TypeError: Failed to fetch could not be cloned.

My Code

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

If you want me to provide any additional information, please let me know.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:7
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

37reactions
ngoahamoscommented, Jan 8, 2020

so if you still have problem with CORS, i simply used the object tag, and it’s working for me

<object [data]="url + '#toolbar=0&navpanes=0' | safeUrl" type="application/pdf" width="100%" height="600px"></object>

use the #toolbar=0&navpanes=0 if you want to disable the toolbar.

i also have a simple pipe safeUrl to deal with XSS

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeUrl',
})
export class SafeUrlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustResourceUrl(value);
  }
}
15reactions
tombalcaencommented, Dec 19, 2017

@alexdragneel So I found a solution. I had to configure the cloud storage bucket. This link will guide you.

It will guide you to install gsutil (command line tool) and configure the bucket where you need to change the permissions.

After you completed the installation. configure the CORS like this… make a cors.json file. and copy paste this json snippet.

[ { “origin”: [“*”], “method”: [“GET”], “maxAgeSeconds”: 3600 } ]

after in the command line tool where you installed gsutil use this command: gsutil cors set cors.json gs://<your-cloud-storage-bucket>

Hope it works!

Read more comments on GitHub >

github_iconTop Results From Across the Web

ng2-pdf-viewer CORS issues - angular - Stack Overflow
Go to your AWS console. · Open the S3 Bucket. · Click on the "Permissions". · Go to the bottom where it says...
Read more >
Problem CORS displaying pdf on Angular, but no ... - Reddit
Problem CORS displaying pdf on Angular, but no problem with jpeg or png. I´m currently working on an Angular APP that ... <pdf-viewer...
Read more >
Angular – ng2-pdf-viewer CORS issues - iTecNote
I'm developing an Angular application that needs to display PDF files. To achieve this, I'm currenty using the [ng2-pdf-viewer][1] component.
Read more >
ng2-pdf-viewer-conzentrate - npm
Start using ng2-pdf-viewer-conzentrate in your project by running `npm i ng2-pdf-viewer-conzentrate`. There are no other projects in the npm ...
Read more >
CORS issues with PDF. Why it happens and how it can be fixed?
1 WHY CORS occurs in DEARFLIP? 1.1 CASE 1: Page is in HTTP while the PDF file is in HTTPS or vice versa....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found