Access-Control-Allow-Origin issue with mobile web app

Question

I am working on mobile web app using sencha touch 2.1. Currently I am making a login system. Do to this I am sending ajax request to remote server from my local machine with username and password in it. But I am keep getting this error

XMLHttpRequest cannot load http://something.com/login.php?_dc=1362983327250. Origin http://dev.vclouds.com is not allowed by Access-Control-Allow-Origin.

In above error http://dev.vclouds.com is my localhost. I set it up in my apache config this way.

Here is my code for ajax request

Ext.Ajax.request({
        url: 'http://something.com/beta/webservice/login.php',
        method: 'post',
        params: {
            user_name: username,
            user_password: password
        },
        success: function (response) {
            var loginResponse = Ext.JSON.decode(response.responseText);
            console.log(loginResponse);
            if(loginResponse.success === "true") {
                me.sessionToken = loginResponse.sessionToken;
                me.signInSuccess();
            } else {
                me.signInFailure(loginResponse.message);
            }
        },
        failure: function (response) {
            me.sessionToken = null;
            me.signInFailure('Login failed');
        },
        callback: function (opts, success, response) {
            console.log('callback');
            console.log(opts);
            console.log(success);
            console.log(response);
        }
    });

How can I solve this problem?

UPDATE

I also tried JsonP as follow

Ext.data.JsonP.request({  //<-- line 35
        url: 'http://something.com/beta/webservice/login.php',
        callbackKey: 'callback',
        //method: 'post',
        params: {
            user_name: username,
            user_password: password
        },
        callback: function (opts, success, response) {
            console.log('callback');
            console.log(opts);
            console.log(success);
            console.log(response);
        }
    });

But I am getting this error

Uncaught TypeError: Cannot call method 'request' of undefined             Login.js:35

Using sencha touch *might* give you some additional options, it won't prevent any of the standard options from working. It doesn't need to say "sencha touch" in the same way that a highway doesn't need to list every model of car that is able to drive along it. — Quentin, Mar 11 '13 at 07:04
@quentin will it might not solve your problem the post in question does tell you way you have the problem and also way you potentially can't solve it. What you are trying to do requires trust between the servers (the remote and yours) and if you can't establish that then you are correct in believing that it will not help you because it's specifically meant to block XSS when traust can't be established — Rune FS, Mar 11 '13 at 10:03

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

0

You need to use JsonP instead of Ajax. Ajax can be used only if you are on the same domain ie the request being made and requested resource should be on same domain. In this case, you've different domains so you need to user JsonP requests.

They way you use JsonP is,

   Ext.data.JsonP.request({
        url: 'http://something.com/beta/webservice/login.php',
        callbackKey: 'callback',
        params: {
            user_name: username,
            user_password: password
        },
        callback:function(result,response){
              console.log(response);
        }
   });

An important point to consider here is, with JsonP data will be sent via GET method only. You can't use POST method. Server also need to return the callback being sent in request in order to proceed execution with callback function. You can find a little info over my ans here .

Also for CORS ie Cross-Origin Resource Sharing related info refer my another ans here

EDIT You need to add required class . like requires:['Ext.data.proxy.JsonP'] in your file. Refere undefined error with JSONP

edited May 23 '17 at 12:11

Community

1
1

answered Mar 11 '13 at 06:52

SachinGutte

6,947
5
35
58

1

Using JSON-P is Ajax … and there are quite a few alternatives to it. – Quentin Mar 11 '13 at 06:53
Please see my update. I already used JsonP but it gives me another error. – Om3ga Mar 11 '13 at 07:00
I would like know to alternatives how to make CORS if we don't have control over server config. – SachinGutte Mar 11 '13 at 07:03
sorry could you elaborate you comment? – Om3ga Mar 11 '13 at 07:04
@x4ph4r You need to add correct `require` for this. Refer this link http://stackoverflow.com/a/14662957/1211980 – SachinGutte Mar 11 '13 at 07:05

Access-Control-Allow-Origin issue with mobile web app

1 Answers1