title: Why doesn't the browser reuse the authorization headers after an authenticated XMLHttpRequest?
body: <p>I'm developing Single Page App using Angular. The backend exposes REST services that require Basic authentication. Getting index.html or any of the scripts does not require authentication. </p>
  
  <p>I have an odd situation where one of my view has a <code>&lt;img&gt;</code> where the <code>src</code> is the url of a REST API that requires authentication. The <code>&lt;img&gt;</code> is processed by the browser and I have no chance to set the authorization header for GET request it makes. That causes the browser to prompt for credentials.</p>
  
  <p>I attempted to fix this by doing this:</p>
  
  <ol>
  <li>Leave <code>img</code> <code>src</code> empty in the source </li>
  <li>At "document ready", make an <code>XMLHttpRequest</code> to a service (<code>/api/login</code>) with the Authorization header, just to cause the authentication to occur.</li>
  <li>Upon completing that call, set the <code>img src</code> attribute, thinking that by then, the browser would know to include the Authorization header in subsequent requests...</li>
  </ol>
  
  <p>...but it doesn't. The request for the image goes out without the headers. If I enter the credentials, then all other images on the page are right.
  (I've also tried and Angular's <code>ng-src</code> but that produced the same result)</p>
  
  <p>I have two questions:</p>
  
  <ol>
  <li>Why didn't the browser (IE10) include the headers in all requests after a successful <code>XMLHttpRequest</code>? </li>
  <li>What can I do to work around this problem?</li>
  </ol>
  
  <hr>
  
  <p><strong>@bergi asked for requests' details. Here they are.</strong></p>
  
  <p>Request to /api/login</p>
  
  <pre><code>GET https://myserver/dev30281_WebServices/api/login HTTP/1.1
  Accept: */*
  Authorization: Basic &lt;header here&gt;
  Accept-Encoding: gzip, deflate
  User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)
  Connection: Keep-Alive
  </code></pre>
  
  <p>Response (/api/login)</p>
  
  <pre><code>HTTP/1.1 200 OK
  Cache-Control: no-cache
  Pragma: no-cache
  Content-Length: 4
  Content-Type: application/json; charset=utf-8
  Expires: -1
  Server: Microsoft-IIS/8.0
  X-AspNet-Version: 4.0.30319
  X-Powered-By: ASP.NET
  Date: Fri, 20 Dec 2013 14:44:52 GMT
  </code></pre>
  
  <p>Request to /user/picture/2218:</p>
  
  <pre><code>GET https://myserver/dev30281_WebServices/api/user/picture/2218 HTTP/1.1
  Accept: */*
  Accept-Encoding: gzip, deflate
  User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)
  Connection: Keep-Alive
  </code></pre>
  
  <p>And then the web browser prompts for credentials. If I enter them, I get this response:</p>
  
  <pre><code>HTTP/1.1 200 OK
  Cache-Control: public, max-age=60
  Content-Length: 3119
  Content-Type: image/png
  Server: Microsoft-IIS/8.0
  X-AspNet-Version: 4.0.30319
  X-Powered-By: ASP.NET
  Date: Fri, 20 Dec 2013 14:50:17 GMT
  </code></pre>