ng2-pdf-viewer CORS

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.

3 thoughts on “ng2-pdf-viewer CORS

  1. Hello,

    Same thing for me, I try to view pdf from Firebase Storage or from my own server and I just get the DataCloneError. But with the test pdf or pdf on ParseServer it’s work.

    Thanks

  2. @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!

  3. 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);
      }
    }