setRequestHeader does not work in JSONP using jQuery

Question

I am building an iPhone app using jQuery Mobile, jQuery 1.7.2, and PhoneGap

trying to get a JSONP from ASP.NET RESTful web service using this code, problem that I need to authenticate first and get a token, then send it back again.

here is my function:

var setToken = function () {
    var serverToken = '';
    $.support.cors = true;
    jQuery('body').ajaxSend(function (evt, xhr) {
        xhr.setRequestHeader("Authorization", "Basic " + $.base64.encode(username + ":" + password));
        xhr.setRequestHeader('X-Accept', 'application/json');
    });
    $.getJSON(url + "?jsoncallback=?", null, function (res) {
        console.log(res);
        serverToken = res.Token;
    });

    $('body').ajaxSend(function (evt, xhr, ajaxOptions) {
        xhr.setRequestHeader('NewToken', serverToken);
    });

};

I get 401 (Unauthorized) checked the header:

    Request URL:http://192.168.0.44/call/?jsoncallback=jQuery17206244203052483243499_132336710607307&_=1336742104278
    Request Method:GET
    Status Code:401 Unauthorized

    Request Headers
    Accept:*/*
    Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:en-US,en;q=0.8
    Connection:keep-alive
    Host:192.168.0.44
    Referer:http://localhost/myMobileApp/
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.168 Safari/535.19
    Query String Parametersview URL encoded
    jsoncallback:jQuery17206244203052483243499_132336710607307
    _:1336710704278

    Response Headers
    Access-Control-Allow-Origin:*
    Cache-Control:private
    Content-Length:0
    Date:Fri, 11 May 2012 04:31:52 GMT
    Server:Microsoft-IIS/7.5
    WWW-Authenticate:Basic
    X-AspNetMvc-Version:3.0
    X-Powered-By:ASP.NET

setRequestHeader did not add the headers.

what am I doing wrong?

keep in mind that the server side was set up already to return JSONP, I don't think we need to make changes there, but any thoughts would help

thanks in advance

Answer 1

As jfriend00 says,

A JSONP request does not use an actual ajax call where you can control the HTTP request.

However in your case - the header you're attempting to add being basic Authorization - you can just inject that into the URL, as you'd "usually" do. So to authenticate at http://example.com with the user "user" and password "pass", the URL would be http://user:pass@example.com/.

Answer 2

A JSONP request does not use an actual ajax call where you can control the http request.

Instead, it injects a script tag into your page and the browser then requests that script src file. The resulting script that is returned executes and communicates back it's result via that javascript execution (calling a callback function). Because the request is generated via a script tag insertion and not a direct ajax call, there is no ability to set request headers on a JSONP request.

If your request is cross domain, then JSONP is your only mechanism.

If your request is the same origin as the page (not cross domain), then you could restructure your request to be an actual ajax call that returns JSON data. If you did that, you could set request headers on the ajax call.