PhoneGap/Cordova 以及最新版本的 Google Chrome 中没有“Access-Control-Allow-Origin”

Posted 2023-03-04

【中文标题】PhoneGap/Cordova 以及最新版本的 Google Chrome 中没有“Access-Control-Allow-Origin”

【英文标题】：No 'Access-Control-Allow-Origin' in PhoneGap/Cordova, as well as the latest versions of Google Chrome

【发布时间】：2015-03-14 07:17:52

【问题描述】：

我在跨移动平台的Sencha Touch Framework 工作，我在mac os x localhost 运行我的项目，我试图通过Ext.Ajax.request 请求获得服务器的响应。我收到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 的典型错误 如何解决我的问题以及我需要将标头信息放在服务器上的确切位置。

header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Headers: X-Requested-With'); 
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');

这些是我在服务器上需要的标头，但我仍然无能为力，并且服务器出现相同的错误。我请求的网站在 Wordpress 中，我尝试使用 jt-cross-domain-ajax 插件来解决我的问题，但我无法做到这一点。

我的服务器代码：

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

我的煎茶触摸码：

 Ext.Ajax.request(
                url: URL, // Some url
                method: 'GET',
                callback: function(options, success, response) 
                    Ext.ComponentQuery.query('#id')[0].sethtml( response.responseText );
                
            );

我的问题是如何解决我的问题，我应该把我的标题来源信息放在哪里，以及实现这个目标的步骤是什么。

【问题讨论】：

您使用哪个浏览器进行调试？铬合金？苹果浏览器？ @user3166680

@devmaniac 我正在使用 google-chrome

【参考方案1】：

您需要在您的 Sencha Touch 代码中将标头放在您发送请求的 php 文件中。

【讨论】：

您的意思是在 wp_ajax 的 add_action 上面添加标题？包含标题所需的任何钩子或操作？请在虚拟代码中解释。

顺便说一句，我只是向 Sencha touch app.js 请求

您是在直接调用 admin-ajax.php 吗？您可以尝试在 myFunc() 函数中添加标题。

【参考方案2】：

您的 Sencha Touch 应用程序将在实际的 PhoneGap / Cordova 应用程序中正常运行。通常可以通过降低桌面浏览器的安全级别来解决此类问题。

但是，如果您真的想在桌面环境中模拟您的项目，（我最喜欢的方法）这里有一些使用 Google Chrome 浏览器的步骤：

完全退出您的 Chrome 浏览器。 打开您的终端。只需输入此命令。

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

重新运行您的 Chrome。如果成功禁用 chrome 安全性，您应该会在 chrome 视图顶部看到黄色警告栏。

通过打开您的 Sencha Touch 项目的 index.html 来打开它

就是这样。您不会再遇到“Access-Control-Allow-Origin”问题了。

更新：

Mac OSX 中最近的 Google Chrome 更新（版本 49.0.2623.87）仍然给我 CORS 问题，即使我运行了上述命令。为了克服它，我必须另外指定 --user-data-dir 。现在应该是：

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

【讨论】：

漂亮干净的解决方案。谢谢！

好的，它也对我有用。请让我知道更多关于它的信息。我在我的谷歌 Chrome 网络浏览器中运行它，当我构建本机应用程序并在 android/ios 中运行我的应用程序时它会如何？

正如我已经提到的，你不会在你的移动原生应用程序中遇到这个起源问题。您是否尝试构建您的应用程序并在您的设备上运行？ @user3166680

不，我没有这样尝试过。想知道如何从 sencha 代码制作原生 .apk 文件的确切解决方案。 @devmaniac

嗯...我认为您的问题超出了范围。也许您可以参考 PhoneGap 文档。 @user3166680

【参考方案3】：

如果可能的话，我会让服务在开发过程中在本地运行，这样我就可以在那里访问它们，那么一旦你的应用程序被打包为带有 Cordova 或 PhoneGap 的本机应用程序，你将不会有任何问题向任何域发出 Ajax 请求（因为Ajax 请求不会由 localhost 域完成）。还研究了 CORS 和 JSONP 以进行跨域 Ajax 请求。