1

I have an application with pdf files stored in the firebase storage.

I want to display the pdf with ng2-pdf-viewer module.

   <app-pdf-view
          [src]="src"
          [original-size]="true"
          [fit-to-page]="false"
          [autoresize]="true"
          [rendertext]="true"
          [show-all]="false"
          [page]="pagenumber"
          (after-Load-Complete)="afterLoadComplete($event)"
          >
   </app-pdf-view>

When I have the file on my local machine in the assets folder, it works fine as I want.

However when I want to display it from firebase storage download url, I am getting this error:

     Failed to load https://firebasestorage.googleapis.com/v0/b/****.***.
        com/o/file-uploads%2Fcollections%2FYd8em6dN%2Fpages%2FrkevJ82Y?alt
        =media&token=0242276f-bf67-4b2c-be93-8d64a***: 

        No 'Access-Control-Allow-Origin' header is present on the requested resource. 
        Origin 'mysite.com' 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.

How can I get this to work?

LearnToday
  • 2,762
  • 9
  • 38
  • 67
  • This is not an Angular but a Firebase issue. Check out this: https://stackoverflow.com/questions/42755131/enabling-cors-in-cloud-functions-for-firebase the problem is that the origin from where the app is served (your localhost) and the origin where the pdf is (somewhere on a google server) are not the same, so the browser complains. – Phil Apr 30 '18 at 14:33

0 Answers0