jQuery JSONP ajax, authentication header not being set

Question

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

jQuery .ajax does have 'username' and 'password' fields that will do basic auth for you if needed — David d C e Freitas, Sep 19 '13 at 02:21

score 26 · Accepted Answer · edited May 23 '17 at 12:34

26

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

edited May 23 '17 at 12:34

Community

1
1

answered Sep 15 '11 at 15:53

Andrew Church

1,391
11
13

1

`xhr.setRequestHeader` doesn't work either. Looks like I need to have a read of the question you linked to. – David Tuite Sep 15 '11 at 16:24

score 3 · Answer 2 · answered Jul 10 '14 at 16:02

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.

score 0 · Answer 3 · answered Sep 07 '16 at 17:08

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);
            }
        });

score -2 · Answer 4 · answered Aug 06 '13 at 21:23

-2

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);
    });

answered Aug 06 '13 at 21:23

rynop

50,086
26
101
112

OK, but this is not JSONP ajax request. This is plain ajax request. – Pointer Null Jan 11 '14 at 07:57
the `headers` option should be valid even if its JSONP. Request headers are part of the HTTP protocol, JSONP is a app/browser level hack. – rynop Jan 15 '14 at 15:46
@rynop "should be valid" doesn't always means "it is valid", the OP's question is very clear and produceable – moghwan Dec 13 '22 at 11:03

jQuery JSONP ajax, authentication header not being set

4 Answers4

Linked