title: How to use CORS to access an iframe
body: <p>When a user prints, my server generate a PDF, and I do this to show the print dialog for the PDF.</p>
  
  <pre><code>$('&lt;iframe type="application/pdf"&gt;&lt;/iframe&gt;').attr('src', url).load(function() {
      var iframe = this;
      setTimeout(function() { //Chrome PDF viewer shows "Loading..." forever otherwise
          iframe.contentWindow.print();
          $(iframe).remove(); //gc
      }, 50);
  }).appendTo('body');
  </code></pre>
  
  <p>But now I am hosting the PDFs on S3. I get </p>
  
  <pre><code>Uncaught SecurityError: Blocked a frame with origin "https://localhost" from
  accessing a frame with origin "https://my-bucket.s3.amazonaws.com".
  Protocols, domains, and ports must match.
  </code></pre>
  
  <p>I presume I need to add <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS" rel="noreferrer">CORS</a> headers.</p>
  
  <p>I have</p>
  
  <pre><code>Access-Control-Allow-Methods: GET, HEAD
  Access-Control-Allow-Origin: *
  </code></pre>
  
  <p>What am I missing?</p>