Missing X-Requested-With: XMLHttpRequest (causes 200 OK But Shows as Error?)

Question

When I retrieve data from my localhost as JSON everything is OK. When I try to get that JSON data from a remote machine everything is OK too. I can parse that JSON data comes from my localhost into objects( a datagrid plugin: jqgrid renders it). However when I try to use remote source it doesn't. At firebug it says 200 OK but it shows an error icon and writes it red. I checked the differences between my localhost and remote connection headers and I found that there is not that header at remote connection:

X-Requested-With    XMLHttpRequest

I think problem may be that. I wasn't setting it and it was working well. It occurs at remote request.

Any ideas to solve it?

PS: I tried setting Ajax headers but didn't work:

    $.ajaxSetup({
          headers: {"X-Requested-With":"XMLHttpRequest"}
    });

    $("#userTable").jqGrid({
        url:'http://xx.xx.x.xxx:8080/aa/bb/cc/user',
        colNames:['User Name','Password'],
        colModel:[
            {name:'userName',index:'userName', width:100},
            {name:'password',index:'password', width:55}
        ],
        jsonReader: ...
        ...
    });

When I use that setup I can not even see the GET Request from Firebug.

PS: I use Spring 3 with REST and Tomcat as web server.

Look at [here](http://jpgmr.wordpress.com/2010/07/28/tutorial-implementing-a-servlet-filter-for-jsonp-callback-with-springs-delegatingfilterproxy/) if you need implement JSONP in Spring. — Oleg, Oct 20 '11 at 11:19

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

I think that you have the Cross-site scripting issue. The problem can be solved if the server set some additional options in the HTTP header of the response. So the solution is not in the modifying of the client code like you do currently, but in the server code.

I recommend you examine the HTTP options which will be set in the HTTP header by tables.googlelabs.com used in the demo from the answer. You will see that the server response has the following additional HTTP options:

X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

and the JSON response will be placed inside of the call of the function defined by jsonCallback parameter. If you would use jsonCallback=? jqGrid will generate the name of the function (something like jQuery16407707202236448429_1319101394784). You can read more about X-XSS-Protection option here and about X-Content-Type-Options: nosniff option here.

How you can see in the demo, the data will be displayed in the jqGrid, so the Cross-site scripting can be implemented in the jqGrid.

Because we call the server tables.googlelabs.com, which not support jqGrid paging and sorting parameters, I used in the demo

url: 'http://tables.googlelabs.com/api/query?jsonCallback=?',
postData: "sql=" + encodeURIComponent("SELECT * FROM 333136 LIMIT 10")

The usage of string instead of object as the postData value will overwrite any other jqGrid parameters which are typically posted. In you case it will be not needed to do this and probably you need just use url: 'http://xx.xx.x.xxx:8080/aa/bb/cc/user?jsonCallback=?'.

In any way you need implement support of JSONP on your server. It means just that the server should "understand" jsonCallback parameter. The implementation depends on your server side implementation. It could be just crossDomainScriptAccessEnabled="true" binding setting for the webHttpBinding in case of WCF service (see here an example of the web.config). See this answer and this one (or this one) additionally for ASP.NET Web services and ASP.NET MVC.

Missing X-Requested-With: XMLHttpRequest (causes 200 OK But Shows as Error?)

1 Answers1

Linked