移动网络应用程序的访问控制允许来源问题[重复]

Posted 2023-02-25

【中文标题】移动网络应用程序的访问控制允许来源问题[重复]

【英文标题】：Access-Control-Allow-Origin issue with mobile web app [duplicate]

【发布时间】：2013-03-11 06:35:06

【问题描述】：

我正在使用 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

【问题讨论】：

那个链接没有回答我的问题。

那个链接确实回答了这个问题。

是否也适用于煎茶触控应用程序？

使用 sencha touch 可能 给你一些额外的选项，它不会阻止任何标准选项的工作。它不需要说“sencha touch”，就像高速公路不需要列出能够沿着它行驶的所有车型一样。

@quentin 它可能无法解决您的问题，相关帖子确实告诉您您遇到问题的方式以及您可能无法解决问题的方式。您正在尝试做的事情需要服务器（远程服务器和您的服务器）之间的信任，如果您无法建立信任，那么您认为它对您没有帮助是正确的，因为它专门用于在无法信任时阻止 XSS成立

【参考方案1】：

您需要使用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 函数。您可以通过我的 ans here 找到一些信息。

对于 CORS 即 Cross-Origin Resource Sharing 相关信息，请参考我的另一个答案 here

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

【讨论】：

使用 JSON-P 就是 Ajax ......而且有很多替代方案。

请看我的更新。我已经使用过 JsonP，但它给了我另一个错误。

如果我们无法控制服务器配置，我想知道如何制作 CORS。

对不起，您能详细说明一下吗？

@x4ph4r 您需要为此添加正确的require。参考这个链接***.com/a/14662957/1211980