[pdfJS Viewer Reactive] "Message: Failed to fetch" due to CORS Policy
Reactive icon
Forge component by Eduardo Jauch
Application Type

Hi team!

I am trying to use this component to load a file in another domain (Experimenting with this file available publicly https://www.total-media.ch/brochures/brochure.pdf ). I am using the parameter AllowedHostsList (with the value "www.total-media.ch"), but still get the error PDF.js v2.12.313 (build: a2ae56f39) Message: Failed to fetch.

When looking into the browser console I see it is because the CORS policy is blocking it. I.e. seems like the AllowedHostsList is not working.

You can find attached a trivial sample of what I am trying.

Do you know what might be the cause? Could there be a bug in the component?

I also tried Enabling Security Policy at the OutSytems environment level and explicity allowing the external domain but it made no difference.

Let me know if you have any idea of what might be the workaround.



Hi Daniel,

It seems that total-media.ch is the one preventing from embedding files from their site. In theory, they would be the ones to enable CORS, for you, so you can embed their documents on your domain.


Thank you for the clarification, Miguel!

Indeed the Access-Control-Allow-Origin is something that has to be set by the server that is hosting the resource that you are trying to access via javascript in the PDFJS viewer component.

Given that I don't have access to the external server the workaround that I've implemented was creating an entry point in the same application in OutSystems (using a REST API) that points to the external PDF file. Sharing the sample attached for others that might run into the same issue.

Thank you for your help!



Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.