title: Chrome saying No 'Access-Control-Allow-Origin' header, but the header is there
body: <p>This issue is mentioned in stackoverflow a dozen times already, but I have a different issue.</p>
  
  <p>Chrome first makes an "OPTIONS" call to get the headers. As you can see, the correct headers are there.</p>
  
  <p><img src="https://i.stack.imgur.com/QbrC7.png" alt="enter image description here"></p>
  
  <p>For some reason, Chrome doesn't notice the header and cancels the actual request in the same manner that it would if the header wasn't there at all.</p>
  
  <p><img src="https://i.stack.imgur.com/4vMGh.png" alt="enter image description here"></p>
  
  <p>The page actually makes three calls and curiously, one of them works. </p>
  
  <p><img src="https://i.stack.imgur.com/2As3A.png" alt="enter image description here"></p>
  
  <p>So the question is, when the header really is there, why does Chrome not respect it? What could I do to debug it?</p>
  
  <p><strong>Update</strong></p>
  
  <p>I tried adding <code>Access-Control-Allow-Methods</code> so now the header response from the OPTIONS call includes these response headers:</p>
  
  <pre><code>Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
  Access-Control-Allow-Methods:POST, GET, OPTIONS
  Access-Control-Allow-Origin:*
  </code></pre>
  
  <p>The result is the same.</p>
  
  <p><strong>Setting the headers on the server side</strong></p>
  
  <p>I set the headers on the serverside on every request (in Global.asax.cs Application_BeginRequest)</p>
  
  <pre><code>Response.Headers.Add("Access-Control-Allow-Origin", "*");
  Response.Headers.Add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  Response.Headers.Add("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
  </code></pre>
  
  <p><strong>After investigating with Fiddler</strong></p>
  
  <p>I looked through the raw request and response and found something surprising: The error is a simple HTTP 500 error from the application. Likely because the HTTP 500 error does not contain the right headers, Chrome doesn't show the returned error but instead shows the header related error.</p>
  
  <p><strong>Answer</strong></p>
  
  <p>So in conclusion, if Chrome gives says <code>No 'Access-Control-Allow-Origin' header</code> it might actually cover up a HTTP 500 error. This can be determined by checking request and response in Fiddler.</p>