jQuery JSONP ajax, authentication header not being set

javascript jquery http-headers jsonp
David Tuite picture David Tuite · Sep 15, 2011 · Viewed 58.8k times · Source

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

Answer

Andrew Church picture Andrew Church · Sep 15, 2011

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

Related questions

Access Control Request Headers, is added to header in AJAX request with jQuery

I would like to add a custom header to an AJAX POST request from jQuery. I have tried this: $.ajax({ type: 'POST', url: url, headers: { "My-First-Header":"first value", "My-Second-Header":"second value" } //OR //beforeSend: function(xhr) { // xhr.setRequestHeader("My-First-Header", "first value"); // …

Read More
How can I add a custom HTTP header to ajax request with js or jQuery?

Does anyone know how to add or create a custom HTTP header using JavaScript or jQuery?

Read More
jquery - get http headers

How do I access a page's HTTP response headers via JavaScript? Related to this question, which was modified to ask about accessing two specific HTTP headers. Related: How do I access the HTTP request header fields via JavaScript?

Read More