Develop Reference

Ajax requests are failing on Cordova Android app

When I ran the project on Chrome browser the ajax requests worked fine but when I installed the app on Android the requests are not working anymore.
This is the code:
var xhr=new XMLHttpRequest()
xhr.onerror=function(){
var message=alert(txt('Please turn on mobile data or Wi-Fi','Ligue os dados moveis ou Wi-Fi'))
}
xhr.onreadystatechange=function (){
if (this.status== 200 && this.readyState == 4){
alert("trye")
eval(xhr.responseText)
}
}
xhr.open("POST",`http://dpreaction.ml?i=js`)
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send()
the config.xml file
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.teste.teste" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>DP Reaction</name>
<description>Inrease your things</description>
<author email="gilluisfrancisco70#gmail.com" href="http://dpreaction.ml">
DP Reaction
</author>
<content src="index.html" />
<allow-intent href="*" />
<access origin="*" />
<allow-naviation href="*" />
</widget>
And this is my tag:
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

According to https://github.com/apache/cordova-android/issues/1354:
Content-Security-Policy is a different security mechanism than CORS (Cross-Origin Resource Sharing).
In cordova-android#10, they implemented a WebAssetLoader, which proxies requests through the https://localhost protocol. The WebAssetLoader acts like a private web server only accessible to your app. This was done because some web view features require you to be in a "secure context" (e.g. HTTPS) for the features to be enabled. In doing so, it does enable CORS enforcement.
Cordova android 9.x uses the plain old file system (file://), which didn't enforce CORs. This is why you see the XHR request work in 9. x but not in 10. x. You can make 10. x behave like 9. x by enabling the AndroidInsecureFileModeEnabled
So if you are using cordova-android#10 just add the following preference at config.xml:
<preference name="AndroidInsecureFileModeEnabled" value="true" />
I had the same problem and it solved it for me. :)

Links inside iframe stopped working with PhoneGap iOS 4.1.0

We have a PhoneGap application using Ionic framework. In this app we can have an iframe containing links with any target: _parent, _top, _self, ...
We capture the clicks with target _parent, _top and _blank to open them in a browser. We don't capture links with target _self or no target because we want them to be opened inside the iframe.
This worked fine when we were using version 3.9.1 for platform-ios, but when we updated to 4.1.0 the links with _self or no target stopped working for some reason. We click them and nothing happens. Nothing is written in the console either.
We have the following in the config.xml:
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*"/>
And the CSP in index.html:
<meta http-equiv="Content-Security-Policy" content="default-src * filesystem: gap: https://ssl.gstatic.com; img-src * filesystem: gap: data: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline' filesystem: cdvfile: file:; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:* filesystem: cdvfile: file:">
Are we missing something in order to make it work?

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

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.

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:">

If the Cordova Whitelist plugin doesn't work out for you, you can use the Cordova advanced Http plugin to make calls to external servers.
Install using:
cordova plugin add cordova-plugin-advanced-http
Link to plugin:
https://github.com/silkimen/cordova-plugin-advanced-http?ref=hackernoon.com
Extra info:
https://hackernoon.com/a-practical-solution-for-cors-cross-origin-resource-sharing-issues-in-ionic-3-and-cordova-2112fc282664

If you just experienced the issue starting Aug 1 2019. This Access-Control-Allow-Origin Error..(using cordova) might be related to the problem.

I have added following in nodejs server which solves my issue;
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
This may be helpful if you are using nodejs.
Thanks

There is no need to do such thing
You just try to change the permission
<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>

I found the solution for my similar scenario, was getting the error:
"access-control-allow-origin cannot contain more than one origin"
Eventually I found that although I had set my .net core API to allow all sources like so:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors();
...
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader());
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
...
I had then left an old CORS command in the web.config file in the website root of the API:
<customHeaders>
<add name="Access-Control-Allow-Origin" value="https://localhost:444" />
</customHeaders>
I commented out the customHeaders section and it worked.
Mission accomplished!

Unable to access cross domain web service in Cordova

I am trying to post some data to an express.js server. The client side is a cordova app. I can successfully post content using a browser but unable to do so using the cordova app.
When I attempt, I get an error: POST https://192.xx.x.1:8081/test 404 (Not Found). Upon using the Chrome device inspector the following is seen
Request URL:https://192.xx.x.1:8081/test
Request Method:POST
Status Code:404 Not Found (from cache)
Here are few more things that I have added:
In config.xml
<allow-navigation href="*" />
The cordova whitelist plugin is already installed.
In index.html and scan.html pages, I have added
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
I have also made sure that the AndroidManifest.xml file contains:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
Here is the code for the POST request
$.ajax({
type : "POST",
url : app.url,
crossDomain: true,
data : {username : 'asd', password : 'sadsfa'},
dataType : 'json',
success : function(response) {
$('#result').text("response");
},
error : function(error) {
alert(JSON.stringify(error));
} });
Finally I tried clearing the application cache. Nothing works. None of the request reaches the server side. What am I missing out?

Are you setting <access origin="*" /> in your config.xml file?
Also, if you are using jQuery Mobile as your UI framework, do a $.mobile.allowCrossDomainPages = true; when you receive the deviceready notification.

LoopBack/Angular/Cordova timing out on Android

We have a web app that's using LoopBack from Strongloop for the API and backend, and Angular on the frontend, with Cordova used to package for mobile. The web app and iOS target from Cordova work great as expected, but when we try to build for an Android device the app server is unreachable from the device. More specifically, after loading the client app and trying to log in, the device makes a POST to my API but never receives a response (and as far as I can tell the request never actually hits the server).
Here's what I've tried so far:
Make sure that access is set to origin="*" in config.xml
Make sure that a Content-Security-Policy meta tag is set in my (single-page) app's index.html, allowing remote network
Make sure that the INTERNET permission is being correctly set in the Android Manifest
Make sure that the app server is reachable from the device in browser
Make sure the generated lb-services.js Angular service has the correct API address
Try generating an Ionic Framework app and dropping my app code into that in case it generates something I need
Since I'm able to get my app running in iOS using Cordova without any issues, I'm thinking there must be something particular to my Android configuration here. I did encounter a separate issue where a plugin that was installed was not compatible with the latest Cordova, but removing that plugin seems to have resolved that. What is different about building for Android that would keep this from working?
EDIT:
I've switched to using Phonegap Build in the hopes that it would be an easier workflow, but I still see the same issues.. Here is the whitelist/CORS configuration that I'm doing:
meta tag in index.html:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'self' 'unsafe-inline'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'">
config.xml (Phonegap Build, identifiable info removed):
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="..." version="1.0.0">
<name ... />
<description ... />
<author ... />
<icon src="icon.png" />
<gap:splash src="splash.png" />
<preference name='phonegap-version' value='cli-5.1.1' />
<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
</widget>

Install https://github.com/apache/cordova-plugin-whitelist since Cordova 5.0.0 is mandatory for CORS query.
Have you installed it ?
If not, this is certainly your issue ;)

It turns out that I was setting <access origin="*" /> in my original Phonegap configuration, but not in my Phonegap Build settings. Making sure that <access origin="*" /> is present in the config.xml used by Phonegap Build seems to fix this.