Cordova 从服务器加载外部内容

Question

There are many (nearly) similar questions, but none of them solved my issue.

I'm writing a cordova app (currently only testing on andoid and ios), and want to load data (in JSON-format) from my webserver. I use jQuerys $.ajax - method for that.

My code so far:

$.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;

This works on browsers (tested in latest Firefox), but not in the app. The error seems to be about cross origin page loading.

My config.xml looks like this:

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

The server is accepting cors-requests via header (otherwise it probably wouldn't work in the browser):

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

but stil: cordova doesn't want to load anything. The alert(error); - line shows this:

SecurityError: Failed to execute 'open' on 'XMLHttpRequest': Refused to connect to ' https://myHost.com/?someparams=foo ' because it violates the document's Content Security Policy

What problem has cordova with this?

Answer 1

You might have to set the Content Security Policy in index.html to allow for requests towards the domain hosting your services.

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

The readme of cordova-plugin-whitelist has more examples.

More info about the Content Security Policy meta tag can be found here .

Answer 2

Based on the answer of @toskv . Check if your HTML-Pages in Cordova include following meta-tag: <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 *"> . The meta-tag is added by Cordova by default and prevents CORS from working (as you can see only self is allowed for default-src ).

Use the links from @toskv to learn more.

The readme of cordova-plugin-whitelist has more examples.

More info about the Content Security Policy meta tag can be found here .