I’m working in Sencha Touch Framework of cross mobile platform, I’m running my project in mac os x localhost, I’m trying to get the server’s response from requesting through Ext.Ajax.request. I’m getting a typical error of CORS: XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 403
How can I resolve my issue and where exactly I need to put the headers information on server.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
These are the headers I need on my server but I’m still helpless and having the same error from server. My requested website is in WordPress and I tried jt-cross-domain-ajax plugin to resolve my probelm but I’m unable to do this.
My Server Code:
add_action('wp_ajax_fun', 'myFunc');
add_action('wp_ajax_nopriv_fun', 'myFunc');
function myFunc()
{
// Here I'm currenlty putting the header informatioins
wp_send_json_success("I'm Working");
die();
}
My Sencha Touch Code:
Ext.Ajax.request({
url: URL, // Some url
method: 'GET',
callback: function(options, success, response) {
Ext.ComponentQuery.query('#id')[0].setHtml( response.responseText );
}
});
My Question is how can I resolve my problem and where I should put my information of headers origins and what are the steps to achieve this goal.
You need to put the headers in the PHP file you’re sending the request to in your Sencha Touch code.
Your Sencha Touch app will run without issues in actual PhoneGap / Cordova application. Usually this kind of issue can be resolved by lowering down security level of your desktop browser.
However if you really want to emulate your project on your desktop environment, (my favorite method) here are some steps with Google Chrome browser:
Re-run your Chrome. If chrome security is successfully disabled, you should see yellow warning bar at the top of the chrome view.
Open your Sencha Touch project by opening its index.html
That’s all. You won’t get ‘Access-Control-Allow-Origin’ issue anymore.
UPDATE:
Recent Google Chrome updates (version 49.0.2623.87) in Mac OSX still gave me CORS issue, even though I ran through above command. I had to specify –user-data-dir additionally in order to overcome it. Now it should be:
If possible I would have the services running locally during development so I can hit them there ,then once your application is packaged as a native app with Cordova or PhoneGap you will not have any issues making Ajax requests to any domain (because the Ajax request won’t be done by localhost domain). Also research about CORS and JSONP to make cross domain Ajax Requests.