How to make an ajax request cross origin CORS

[SurenderBhyan1]

Ext JS 4.2.1
Chrome

I am trying first time to make an ajax request with CORS. But getting the below error in console and request fails.

Below is two fiddle (Sencha Fiddle, JS fiddle), Both have different error in console.

Sometime its gives Access-Control-Allow_Origin error
Fiddle: https://fiddle.sencha.com/#fiddle/kvu

http://jsfiddle.net/SurenderBhyan1/vdazU/849/

CORS.jpg


Please help where I am missing the flow. You can try with different ajax URL.

Thanks in advance

[tristan.lee]

Hi,

To make an AJAX request using CORS, the server needs to be configured to accept cross-origin requests. You can read more about enabling that here if it's not already available on your server: http://enable-cors.org/

You'll also need to enable CORS on the Ajax class for the request. In this example, the request still fails as the protocols differ (https vs http) and the destination does not appear to be configured to allow your request.



Hope this helps,
Tristan

[SurenderBhyan1]

Thank You Tristan. Reference provided by you helped a lot me and I was missing the headers for origin from server side .

Here is another fix using Jquery Ajax

$.ajax({
            url: 'http:ww.abc.com?callback=?',
            dataType: 'JSONP',
            jsonpCallback: 'callbackFnc',
            type: 'GET',
            async: false,
            crossDomain: true,
            success: function () { },
            failure: function () { },
            complete: function (data) {
                if (data.readyState == '4' && data.status == '200') {
                    errorLog.push({ IP: Host, Status: 'SUCCESS' })
                }
                else {
                    errorLog.push({ IP: Host, Status: 'FAIL' })
                }
            }
        });

[tristan.lee]

Glad to have helped!

[karthikrish]

when i trying to load data in viewModel store using Ext.Ajax.Request .

viewModel :

stores : {
unitdetailswaybills : {
autoLoad : true,
proxy: {
type: 'memory',
data : [],
reader: {
type: 'json',
rootProperty: 'wayBill'
}
}
}
}


Controller :

Ext.Ajax.request({
url: '10.155.105.41:8080/fleeet/getSummaryData',
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
params: Ext.JSON.encode(formPanel.getValues()),
success: function(response) {
var myText = Ext.encode(response.responsetext);
var myString = JsoN.strinfy(myText);
var myData = Ext.JsON.decode(myString);
var myStore = this.getViewModel().getStore('unitdetailswaybills');
myStore.loadRawData(myData);
},
failure: function(response) {}
});

Note :


This is the way i tried ,

but the data is not loaded properly in viewModel Store.

Please tell me how to resolve this issue.

Thanks in Advance,