JSONP Errors - Access-Control-Allow-Origin and MIME

Question

I am trying to create the server and client side of a jsonp request and I cannot get it to work. I looked through numerous manuals, blog posts, etc., but almost all show only the client side.

Here is my client code

$.ajax({ dataType: 'application/json', data: params, jsonp: 'jsonpCallback', url: settings.domain + '/httpext.dll?json_cc', success: function (data) { //determine the return status }, error: function (response, status, error) { //error handling } }); //end ajax 

right now the server is returning a hard coded value like this

 jsonpCallback({"username":"meltingice","posts"1234}); 

My problem is that I cannot get the request and response to work together. Currently, the response is returning application / json, so if I change my ro request, expect jsonp for its errors with

The resource is interpreted as a script, but migrated using an application like MIME / json. Uncaught ReferenceError: jsonpCallback not defined

First, as you can see, I have jsonpCallback defined.

Now, if I change dataType to application / json, I get this error

 XMLHttpRequest cannot load http://myserver/httpext.dll?json_cc&sid=adsfhasjdkfhajksdghjk%3Basdhg&action=SALE&ccCard=&ccNum=&ccExMM=0&ccExYYYY=0&ccCVV2=&holdersName=&totalDue=0&dueDate=11%2F19%2F2010. Origin http://localhost:59905 is not allowed by Access-Control-Allow-Origin. 

As you can see, it does not put callback=? in the url. This is pretty unpleasant.

How to configure the server side so that I can call it using jsonp? What do I need for an answer type? How to format the returned data so that my client-side code can discard the data?

Answer 1

The reason this does not work is because your server always returns the name of the hard-coded method, and your client uses the anonymous success handler. This will not work. You need to configure the server to use the method name passed as an argument, or it will never call the success callback on the client. Therefore, once you configure the server to account for the jsoncallback request jsoncallback , you can test it as follows:

 $.getJSON(settings.domain + '/httpext.dll?json_cc&jsoncallback=?', params, function(result) { alert('success'); }); 

Now the server will receive a request that may look like this:

 http://foo.com/httpext.dll?json_cc&jsoncallback=jsonp1290183992345 

and he should answer as follows:

 jsonp1290183992345({"username":"meltingice","posts"1234}); 

with its own Content-Type also obvious ( application/json ).

Answer 2

I also wanted to contribute this snippet that I used in ASP.NET MVC to handle jsoncallback.

  private static ActionResult GetContent(object data, string callback) { if (!string.IsNullOrEmpty(callback)) { ContentResult result = new ContentResult(); result.ContentType = "application/json"; JavaScriptSerializer serializer = new JavaScriptSerializer(); string json = serializer.Serialize(data); result.Content = string.Format("{0}({1})", callback, json); return result; } else { JsonResult result = new JsonResult(); result.Data = data; result.JsonRequestBehavior = JsonRequestBehavior.AllowGet; return result; } }