【问题标题】:Cordova load external content from serverCordova 从服务器加载外部内容
【发布时间】:2026-02-15 16:00:01
【问题描述】:

有很多(几乎)类似的问题,但没有一个能解决我的问题。

我正在编写一个cordova 应用程序(目前仅在andoid 和ios 上进行测试),并且想从我的网络服务器加载数据(JSON 格式)。我使用 jQuerys $.ajax - 方法。

到目前为止我的代码:

$.support.cors = true;
var ret = -1;
$.ajax(url, {
    traditional: true,
    type: 'POST',
    url: url,
    contentType: 'text/plain',
    xhrFields: {
        withCredentials: false
    },
    data: dataString,
    success: function (data) {
        alert('Data recieved:');
        alert(data);
        ret = data;
    },
    error: function (xhr, ajaxOptions, error) {
        alert('There was an error');
        alert(error);
        alert(xhr.status);
    }
});
return ret;

这适用于浏览器(在最新的 Firefox 中测试),但不适用于应用程序。该错误似乎与跨源页面加载有关。

我的 config.xml 如下所示:

...
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
...

服务器正在通过标头接受 cors-requests(否则它可能无法在浏览器中工作):

<?php
header('Access-Control-Allow-Origin: *');
...

但仍然:cordova 不想加载任何东西。 alert(error); - 行显示:

SecurityError: 无法对“XMLHttpRequest”执行“open”:拒绝连接到“https://myHost.com/?someparams=foo”,因为它违反了文档的内容安全策略

cordova 有什么问题?

【问题讨论】:

  • 您是否尝试过在应用程序的 index.html 中设置元标记以允许访问您想要的 url?
  • 不,我不知道您还必须在 html 文件中执行此操作。你能给我举个例子吗?
  • 对于离子应用程序我也必须这样做,我记得它需要 CSP 才能工作。我检查我添加的答案。 :)

标签: javascript jquery ajax cordova


【解决方案1】:

您可能必须在 index.html 中设置内容安全政策,以允许向托管您的服务的域发出请求。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' <enter-your-domain-here> data: gap: https://ssl.gstatic.com;">

cordova-plugin-whitelist的自述文件有更多示例。

可以在here 找到有关内容安全策略元标记的更多信息。

【讨论】:

  • 这段代码似乎不起作用,另外它阻止了 eval 函数,这将迫使我重构我的代码:/ 我想要的只是启用与一台主机的通信,没有额外的安全规则。可悲的是我真的不明白readmy。你能再帮我一次吗?那个元标记会是什么样子?
  • 我编辑了答案,希望对您有所帮助。此外,您可能希望将 withCredentials 字段设置为 true。 :)
  • 嘿,我注意到对我来说问题是默认情况下元标记就在那里。如果您删除元标记,一切都会像魅力一样!
【解决方案2】:

基于@toskv的回答。检查您在 Cordova 中的 HTML 页面是否包含以下元标记:&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"&gt;。默认情况下,元标记由 Cordova 添加并阻止 CORS 工作(如您所见,default-src 只允许使用 self)。

使用来自@toskv 的链接了解更多信息。

cordova-plugin-whitelist的自述文件有更多示例。

有关内容安全策略元标记的更多信息可以找到here

【讨论】:

  • 就是这样!实际上已经有这个元标签了……我想你有时应该早点睡觉,第二天再看问题:)