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