setRequestHeader does not work in JSONP using jQuery

问题:

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

回答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/.

回答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.

文章来源: setRequestHeader does not work in JSONP using jQuery