HTTP Headers setting Authorization header stops data from loading

问题

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?

回答1:

Not really sure what the problem is here. Looks like you're running into sth. similar to this: cross-origin 'Authorization'-header with jquery.ajax()

Also, did you change anything in the Ember.SimpleAuth code? Because by default it shouldn't include the token in cross domain requests for security reasons...

You might also want to look at this known problem in jQuery: Sending credentials with cross-domain posts? that also relates to sending the Authorization header cross-domain.

I'll look into how Ember.SimpleAuth could maybe help in this scenario.

回答2:

I did some investigation: in general Ember.SimpleAuth should work with CORS. I think what you're missing is the

Access-Control-Allow-Origin: http://subdomain2.domain.com

header in the response to the GET request. Also see the example in the Mozilla docs: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS. Every response must contain the Access-Control-Allow-Origin header.

HTH

来源：https://stackoverflow.com/questions/19755570/http-headers-setting-authorization-header-stops-data-from-loading

标签

jquery

ember.js

http-headers

cors

http-authentication