2

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.

2
  • Which browser are you using for debugging? Chrome? Safari? @user3166680
    – Nick Song
    Jan 16, 2015 at 8:13
  • @devmaniac I'm using google-chrome
    – developer
    Jan 16, 2015 at 10:09

3 Answers 3

1

You need to put the headers in the PHP file you're sending the request to in your Sencha Touch code.

3
  • You means to add headers just above on the add_action of wp_ajax ? Any hooks or actions required to include headers? please explain in the dummy code.
    – developer
    Jan 15, 2015 at 19:31
  • By the way I'm just requesting from Sencha touch app.js
    – developer
    Jan 15, 2015 at 19:35
  • Are you doing a direct call to admin-ajax.php? You can try adding the headers inside the myFunc() function.
    – Sjors
    Jan 15, 2015 at 21:37
0

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:

  • Completely quit your Chrome browser.
  • Open your Terminal. Just type this command.

open /Applications/Google\ Chrome.app/ --args --disable-web-security

  • 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:

open /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=~/ChromeUserData/

5
  • Nice and clean solution. Thank you!
    – user3888372
    Jan 16, 2015 at 9:21
  • OK, its working for me also. Please let me know a bit more about it. I ran this in my Google Chrome web browser, how can it will when I build the native app and run my app in android/iOS?
    – developer
    Jan 16, 2015 at 10:23
  • As I mentioned already, you won't get this origin issue in your mobile native applications. Did you try to build your app and run on your devices? @user3166680
    – Nick Song
    Jan 16, 2015 at 12:27
  • No I haven't try as such. Want to know about the exact solution how to make native .apk file from sencha code. @devmaniac
    – developer
    Jan 16, 2015 at 12:56
  • Well... I think your question goes out of range. Maybe you can refer to PhoneGap documentations for this. @user3166680
    – Nick Song
    Jan 16, 2015 at 13:01
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.