title: One iframe randomly fails to XHR
body: <p>I have a page on <code>http://localhost:3000</code> that contains an iframe whose <code>src</code> is <code>http://localhost:3010/login</code>. The iframe does the following:</p>
  
  <ul>
  <li>Requests the <code>src</code> html.</li>
  <li>After receiving a 302 redirect, it follows it to <code>http://localhost:3000/oauth/authorize?response_type=code&amp;client_id=1&amp;redirect_uri=http%3A%2F%2Flocalhost%3A3011%2Fauthorization_code&amp;state={state}</code>.</li>
  <li>The iframe is then redirected back to its own origin: <code>http://localhost:3010/authorization_code?code={code}&amp;state={state}</code>.</li>
  <li>The iframe-embedded app's server successfully exchanges the authorization code for an access token and redirects to <code>http://localhost:3010</code> with a cookie set to the OAuth2 <code>access_token</code>.</li>
  <li>Some JavaScript code makes an XHR to <code>http://localhost:3010/api/customerInfo</code>.</li>
  <li>The customer information is returned and rendered in the iframe using JavaScript.</li>
  </ul>
  
  <p>So this all works just fine.</p>
  
  <p>However, when I add a second iframe-embedded app with its own origin <code>localhost:3020</code>, which goes through the same flow, one of the apps' first XHR will fail with the following error:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://localhost:3000/oauth/authorize?response_type=code&amp;redirect_uri=http%3A%2F%2Flocalhost%3A3011%2Fauthorization_code&amp;state=17nCw5o0Tr11Y6z8&amp;client_id=1" rel="nofollow">http://localhost:3000/oauth/authorize?response_type=code&amp;redirect_uri=http%3A%2F%2Flocalhost%3A3011%2Fauthorization_code&amp;state=17nCw5o0Tr11Y6z8&amp;client_id=1</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:3010" rel="nofollow">http://localhost:3010</a>' is therefore not allowed access. The response had HTTP status code 400.</p>
  </blockquote>
  
  <p>The seems a bit odd because it's saying it cannot load a URL via XHR that it has already loaded via a redirect.</p>
  
  <p>Sometimes one iframe fails and sometimes the other. Every single time and in every browser, one iframe can execute an XHR the other one causes this error. I have even delayed both iframes' initial XHR by different amounts so that they don't overlap, but to no avail.</p>
  
  <p>The iframes are generated dynamically (via React) and have this attribute: <code>sandbox='allow-forms allow-scripts allow-same-origin'</code>.</p>