I have searched in google and also SO for days to resolve my issue. But nothing can resolve my issue. I want to build just simple mobile apps with Cordova latest version (Cordova version 11.0.0). The problem is about croos domain to fetch data from external domain.
At the index.html file I have put the code below:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://app.example.com 'unsafe-eval'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:*;">
And for jquery request at index.html, I have put below:
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/jquery-3.6.0.min.js"></script>
<script>
$(document ).bind( "mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
});
</script>
<script src="scripts/bootstrap.min.js"></script>
<script>
function ambilCoba()
{
var loginString ="view=all";
$.ajax({
type: "GET",
dataType:"json",
crossDomain: true,
cache: false,
url: 'https://app.example.com/test.php',
data: loginString,
success: function(json){
$('#kotbah').html(json['output'][3]);
}
});
}
</script>
As I read at SO, the place for jquerymobile must be correct. I have tried to place it with many position, but still no luck.
At the config.xml file I have put below:
<access origin="*" />
<allow-intent href="https://*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="http://*/*" />
And at the external domain that I want to fetch the data (test.php) I have put this code:
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , Authorization');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Content-Length: 0');
header('Content-Type: text/plain');
header('Content-Type: application/json');
$p=array(1,2,3,4);
return json_encode($p);
?>
At the index.html of Cordova, it should print the result is 4. It works in local browser. But when I tried to run at Android Emulator, it show nothing. Trying to build the APK file and installed it at the mobile phone, no result too.
I also trid to use XMLHttpRequest as being suggested in SO. The code is below:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
var container = document.getElementById('kotbah');
container.innerHTML = xhr.responseText;
}
else
{
alert(this.status);
alert(this.statusText);
alert(this.responseText);
}
}
xhr.open('GET', 'https://app.example.com/APP/test.php', true);
xhr.send(null);
I set alert for status to see what exactly happen in Android. And at the Android Emulator the alert for status is 404, meaning of page not found. But the URL is truly exist.
I have tried it for days, but still no luck. 2 years ago, I use cordova but different version, and no issue is shown with the config above. I also read that I need to use whitelisting-plugin. I tried to do so, but at github, it said that whitelisting-plugin is no longer need at Cordova version 6 and later.
What am I missing with all of that code to fetch PHP data from external domain? Please help. Thanks.
