Uncaught (in Promise) Domexception: Blocked A Frame With Origin "http://127.0.0.1:4100" From Accessing A Cross-origin Frame - React Js

I have and Iframe in a react component which loads a pdf file on click of button from an external url (My Api endpoint with port 8000), After It's loaded successfully, I want to pr

Solution 1:

You can't access cross-origin iframes directly.

There are methods to communicate, through iframes, between HTML documents on different origins but they don't apply here since you are loading a PDF.

A few approaches you could take for dealing with this are:

• Use the same origin for both documents
• Convert the PDF to HTML
• Fetch the HTML with Ajax (you'll need CORS) and then render it with something like Mozilla's PDF.js