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 print the content of that Iframe, But getting and error
Here is my react component
import React from 'react'
const pageCont = () =>{
return(
<div>
<iframe id='pdfp' name='pdfp' src='http://127.0.0.1:8000/api/ebook.pdf'></iframe>
<button onClick={()=>{
document.getElementById("pdfp").contentWindow.focus()
document.getElementById("pdfp").contentWindow.print()}
}>
Print Iframe
</button>
</div>
)
}
export default pageCont;
Uncaught (in promise) DOMException: Blocked a frame with origin "http://127.0.0.1:4100" from accessing a cross-origin frame
I am making Request from front end which has a url of 127.0.0.1:4100
. I feel this error is due to the fact that the Iframe source and request origin has different protocols.