javascript - CORS + Cordova : issues with : Access-Control-Allow-Origin

Question

I have been searching hours on this issue, but I still can't find any solution to this.

I am developping an App cordova (basicely HTML / JS) So : the app runs on mobile from the navigator, and I have trouble making an ajax request to an API : https://developer.riotgames.com/ But let's say that I just want to get the google page.

How on earth do I do that, is this even possible ? Here is a simple exemple :

$.ajax({
    type: "GET",
    url: "https://google.com",
    dataType: "text",
    success: function(response){
        alert("!!!");
    },
    error: function(error){
        alert("...");
    }
});

I am getting the same error again and again :

XMLHttpRequest cannot load https://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

The origin 'null' is because I run the code from : file:///D:/Projets/LoL/www/index.html and I read that the navigator is blocking, but it doesn't work as well if I disable the security with --disable-web-security And of course, I don't have access to the server I want to join.

Answer 1

You need the Cordova whitelist plugin: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/.

Have this in config.xml:

<access origin="*" />
<allow-navigation href="*"/>

And have the Content-Security-Policy meta in index.html. Something like:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">