I'm using Ember.js, Ember Simple Auth plugin and jQuery to send an Authorization header cross domain using ajax. When the Authorization header is set:
jqXHR.setRequestHeader('Authorization', 'Bearer ' + session.get('authToken'));
Then I get a pre-flight OPTIONS request to the REST URL which I then return back the following headers:
$headers->set('Access-Control-Allow-Origin', 'http://subdomain2.domain.com');
$headers->set('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
$headers->set('Access-Control-Allow-Headers', 'Content-Type, Authorization, Accept');
$headers->set('Access-Control-Max-Age', 10);
$headers->set('Content-Length', 0);
In Chrome Network monitor, this OPTIONS request returns successful. Then when the GET request comes after the pre-flight OPTIONS request, the GET request just hangs or at least says (pending) in network monitor:

If I refresh the page a couple of seconds later the page will show, but it just doesn't show immediately after the OPTIONS call.
When I play with the Access-Control-Max-Age header and increase the cache time, then I can refresh many times before it sends the OPTIONS call again which means the page will show just fine. It's only when the OPTIONS call comes with the GET immediately after does it hang. 
When I load the url directly in the browser it displays the JSON data just fine. Even when I use the Chrome extension Postman and manually set the Authorization header the same as the jQuery request, it still loads the data just fine (although I don't think Postman simulates cross domain requests).
Any idea why the GET request remains pending and doesn't return any errors or headers?
 
     
    