移动网络应用程序的Access-Control-Allow-Origin问题

时间:2013-03-11 06:35:06

标签: javascript ajax cordova sencha-touch sencha-touch-2

我正在使用sencha touch 2.1处理移动网络应用。目前我正在建立一个登录系统。这样做我正在使用用户名和密码从本地计算机向远程服务器发送ajax请求。但我一直收到这个错误

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

上述错误http://dev.vclouds.com是我的localhost。我用这种方式在我的apache配置中设置它。

这是我的ajax请求代码

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);
        }
    });

我该如何解决这个问题?

更新

我也试过JsonP如下

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);
        }
    });

但我收到此错误

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

1 个答案:

答案 0 :(得分:0)

您需要使用JsonP而不是Ajax。只有当您在同一个域上时才能使用Ajax,即正在进行的请求和请求的资源应该在同一个域上。在这种情况下,您拥有不同的域,因此您需要使用JsonP个请求。

他们使用JsonP的方式是,

   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);
        }
   });

此处需要考虑的一点是,JsonP数据仅通过GET方法发送。您无法使用POST方法。服务器还需要返回请求中发送的callback,以便继续使用callback函数执行。您可以在我的here找到一些信息。

对于CORS,即Cross-Origin Resource Sharing相关信息,请参阅我的另一个ans here

编辑您需要添加所需的课程。比如你文件中的requires:['Ext.data.proxy.JsonP']。参考undefined error with JSONP