Unable to get JSON response from cross domain AJAX request - ajax

Question

I'm using a JSON store in ExtJS and getting the data from an ASP.net web service. It returns the data successfully if I use it in the same domain, but in a cross-domain it returns an error:
XMLHTTPREQUEST Access-Control-Origin Header is not allowed by the
Origin
Here is my code:
var myStore = new Ext.data.JsonStore({
// Load data at once
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.HttpProxy({
// Call web service method using GET syntax
type:'ajax',
url: path+'SelectIncidentList',
restful:true,
// Ask for Json response
headers: {'Content-type': 'application/json'},
reader: {
type: 'json',
root: 'd'
},
}),
id: 'incidentid',
// Fields declaration
fields: ['incidentid','occured','headline','source','enteredby','bodyintro','webaddress','location1','location2','location3','location4','image','incidenttypeid','incidentsubtypeid']
});
* EDIT *
Based off the answers I got, I changed my code to use JSONP. However I am running into another issue. With these changes to my ExtJS code:
var myStore = new Ext.data.JsonStore({
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.proxy.JsonP({
type:'jsonp',
url: path+'SelectoccurList',
headers: {'Content-type': 'application/json'},
reader: {
type: 'json',
root: 'd'
},
}),
id: 'occurid',
// Fields declaration
fields: ['occurid','occured','headline','source','enteredby','bodyintro','webaddress','location1','location2','location3','location4','image','occurtypeid','occursubtypeid']
});
I am running into the following error:
<?xml version="1.0" encoding="utf-8"?>
**SelectOccurList:-1Resource interpreted as Script but transferred with MIME type text/xml.
SelectOccurList:1SyntaxError: Unexpected token '<'**
<ArrayOfOccurData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
<OccurData>
<occurid>22</occurid>
<occured>2012-05-26T04:33:53-04:00</occured>
<headline>headline</headline>
<source>content</source>
<enteredby />
<bodyintro>content</bodyintro>
<webaddress />
<location1>29 -156.364</location1>
<location2 />
<location3 />
<location4 />
<image>url of iamge</image>
<occurtypeid>0</occurtypeid>
<occursubtypeid>0</occursubtypeid>
</OccurData>
<OccurData>
<occurid>23</occurid>
<occured>2012-05-26T15:41:52-04:00</occured>
<headline>headline</headline>
<source>test content</source>
<enteredby />
<bodyintro>test content</bodyintro>
<webaddress />
<location1>27.75974 -82.67853</location1>
<location2 />
<location3 />
<location4 />
<image>url of image</image>
<occurtypeid />
<occursubtypeid />
</OccurData>
<OccurData>
<occurid>24</occurid>
<occured>test</occured>
<headline />
<source />
<enteredby />
<bodyintro />
<webaddress />
<location1 />
<location2 />
<location3 />
<location4 />
<image />
<occurtypeid>0</occurtypeid>
<occursubtypeid>0</occursubtypeid>
</OccurData>
<OccurData>
<occurid>25</occurid>
<occured>Testing</occured>
<headline>Testing 28 05 </headline>
<source>Dummy</source>
<enteredby>XYZ</enteredby>
<bodyintro>This occur is dummy</bodyintro>
<webaddress>http://</webaddress>
<location1>5cd41415-5c60-4cbd-a6f3-05330b368a41</location1>
<location2 />
<location3 />
<location4 />
<image />
<occurtypeid>0</occurtypeid>
<occursubtypeid>0</occursubtypeid>

Answer 1

That's exactly what you'd use a JsonP proxy for, which uses a script tag + callback function to get around the same domain browser restriction. The linked header documentation explains it fully with example code, including a few basic server implementations.
The other option would be to actually proxy the call on your server -- i.e., the Ajax proxy calls your server, which then calls the remote server and formats a standard JSON response back to your client. You just can't make the call directly from client to remote server.

Answer 2

You can configure your server to setting "access-control-" headers.
https://developer.mozilla.org/en/http_access_control