CODEWITHSUNDEEP
javascriptjqueryhttp-headersjsonp
David Tuite
David Tuite

Reputation: 22643

jQuery JSONP ajax, authentication header not being set

I'm trying to make an ajax request to the google contacts API with the following setup:

$.ajax({
  url: "https://www-opensocial.googleusercontent.com/api/people/@me/@all",
  dataType: 'jsonp',
  data: {
    alt: 'json-in-script'
  },
  headers: {
    'Authorization': 'Bearer ' + token
  },
  success: function(data, status) {
    return console.log("The returned data", data);
  }
});

But the Authentication header doesn't seem to get set. Any ideas?

The request

Upvotes: 27

Views: 61978

Answers (4)

user1413048
user1413048

Reputation: 233

Is seems that most of the OAUTH2 REST resources accept the access_token parameter as part of the request url

http://self-issued.info/docs/draft-ietf-oauth-v2-bearer.html#query-param

please, try the following code instead:

$.ajax({
            dataType: 'jsonp',
            url: url,                
            data: {
                'access_token':token.access_token
            },
            jsonpCallback: 'thecallback',
            success: function(data){
                _cb(data);
            },
            error: function(d){
                _cb(d);
            }
        });

Upvotes: 0

Dangladesh
Dangladesh

Reputation: 41

When authentication is needed in a cross domain request, you must use a proxy server of some sort.

Since using dataType: jsonp results in the HTTP request actually being made from the script that gets added to the DOM, the headers set in the $.ajax will not be used.

Upvotes: 4

rynop
rynop

Reputation: 53569

Just do this (jquery 2.0, but should work in previous versions) 

    $.ajax({
        url: "/test",
        headers: {"Authorization": "Bearer " + $('#myToken').val()}
    })           
    .done(function (data) {
      console.log(data);
    })
    .fail(function (jqXHR, textStatus) {
      alert("error: " + textStatus);
    });

Upvotes: -2

Andrew Church
Andrew Church

Reputation: 1391

I had the same problem recently. Try this:

$.ajax({
  url: "https://www-opensocial.googleusercontent.com/api/people/@me/@all",
  dataType: 'jsonp',
  data: {
    alt: 'json-in-script'
  },
  success: function(data, status) {
    return console.log("The returned data", data);
  },
  beforeSend: function(xhr, settings) { xhr.setRequestHeader('Authorization','Bearer ' + token); } 
});

EDIT: Looks like it can't be done with JSONP. Modify HTTP Headers for a JSONP request

Upvotes: 26

Related Questions