This is how I'm making the call:
$http.get( url, {
params : {
empId: $scope.empId
}
}).then(function(data, status){
$scope.workOrders = data.data;
}, function(data, status){
$scope.message = data;
});
It works just fine on Chrome, and if I navigate to the URL on my phones browser I can get a response just fine.
However, whenever I use the .apk that gets built I get:
{"data":"",
"status":404,
"config":{
"method":"GET",
"transformRequest":[null],
"transformResponse":[null],
"params":{"empId":"123"},
"url":"http://...",
"headers":{"Accept":"application/json, text/plain, */*"}
},"statusText":Not Found"}
Kinda lost on this one. Just weird that I can hit the URL from my phone browser but not within the Ionic/Cordova built .apk
As requested, here is my config.xml file:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.myapp397384" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>myApp</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
</widget>
Aha!
Apparently Cordova just released cordova-android 4.0 not too long ago and it by default blocks http requests.
Just run this command:
ionic plugin add cordova-plugin-whitelist
And you're good to go.
Related
I built an ionic/angular web app via ionic build, then created the android project with capacitor via
"ionic capacitor run android -l --external". I'm trying to make an http post request to a local web api.
Api's IP is 127.0.0.1:43308, while the android project is running at http://192.168.1.6:8100.
I tried many solutions online and all led me back to the same error
net::ERR_CONNECTION_REFUSED
Anyone got ideas? the project has no issues when ran through a web browser, only gives me such error when it's ran as a native application
Capacitor.config.json:
{
"appId": "com.reservation.app",
"appName": "reservation-app",
"webDir": "www",
"npmClient": "npm",
"server": {
"url": "http://192.168.1.6:8100",
"cleartext": true,
"allowNavigation":[
"localhost:8100/*"
]
}
}
Config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<access origin="*" />
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="#xml/network_security_config" />
<application android:usesCleartextTraffic="true" />
</edit-config>
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<feature name="CordovaHttpPlugin">
<param name="android-package" value="com.silkimen.cordovahttp.CordovaHttpPlugin"/>
</feature>
<feature name="File">
<param name="android-package" value="org.apache.cordova.file.FileUtils"/>
<param name="onload" value="true"/>
</feature>
<feature name="Whitelist">
<param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin"/>
<param name="onload" value="true"/>
</feature>
</widget>
EDIT:
Web API's CORs policy:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy(name: AllowSpecificOrigins,
builder =>
{
builder.WithOrigins( "http://localhost:8100", "http://192.168.1.6:8100")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
});
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseCors(AllowSpecificOrigins);
}
Looks like a CORS issue.
Enable CORS for all request methods and from localhost ports 3000 ( http://192.168.1.6:8100 in your case) and 1056 (default for the Webpack server and VS.NET respectively)
As we require credentials sent over, we can't use 'Access-Control-Allow-Origin: *' and need to explicitly list available websites.
See brief description here or a verbose one here
To enable CORS for your entire application the line below must precede any defined endpoints in your app that you want to support cross-origin requests (ex. before any call to UseMvc).
app.UseCors(builder =>
builder.WithOrigins(["http://192.168.1.6:8100","Other Origins that need to call the backend here"])
.WithExposedHeaders(HeaderNames.ContentDisposition) // Expose the file name of downloaded files
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
);
Figured it out, web api IP address should be 127.0.0.1:PORT, and android's api reference IP should be 10.0.2.2:PORT (points to the pc's local server).
https://learn.microsoft.com/en-us/xamarin/cross-platform/deploy-test/connect-to-local-web-services#create-a-development-certificate
Can't connect to api endpoint from mobile app
I have been experiencing this issue since I tried run my app in a device..
I re-install the cordova-whitelist plugin.
When I try to run the app again from the browser using ionic serve command.
the app calls to the wrong API..
below is the log in my console when I try to login to the app.
POST http://192.168.43.57:8100/auth/login 404 (Not Found)
the $http url declared on my JS code is different from what the console is pointing to.
login controller
$scope.login = function() {
var credentials = {
username: $scope.loginData.username,
password: $scope.loginData.password
}
$auth.login(credentials).then(function() {
$http.get('http://api.mydomain.com/api/login')
.success(function(response){
var user = JSON.stringify(response.user);
localStorage.setItem('user', user);
$rootScope.currentUser = response.user;
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('tabs.download');
})
.error(function(){
var alertPopUp = $ionicPopup.alert({
title: 'Login Failed!',
template: 'Invalid credentials'
});
})
});
}
UPDATE:
config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.ticappnew343084" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Test Mobile</name>
<description>
TIC Inspection Report Generator
</description>
<author email="user#example.com" href="http://example.com/">
Author Name
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
<allow-navigation href="http://192.168.43.57:8100"/>
</widget>
after reading all my codes I finally found the solution..
it seems that I have forgot to specify the login api url to my app config..
so I added this line of code in my app.js file
.config(function($stateProvider, $urlRouterProvider, $authProvider){
$authProvider.loginUrl = 'http://api.mydomain.com/api/login'
})
then changed the url in my login function from
$http.get('http://api.mydomain.com/api/login')
to
$http.get('http://api.mydomain.com/api/user')
this api retrieves the user information from the server..
I have an application based on Cordova 2.7 for Android platform.
Yesterday I had to upgrade Cordova version because of Google Play warning about vulnerabilities...
What I did is to create a basic Cordova app throw terminal commands before upgrades.
After that I put this code into the index.js default file:
onDeviceReady: function() {
app.receivedEvent('deviceready');
//navigator.app.loadUrl('http://www.google.com/');
alert('inside');
//console.log(navigator.app);
//window.location = encodeURI('http://www.example.com');
//window.location.href = 'http://www.example.com/';
window.location = 'http://www.example.com/'; <--- Not works
//window.location = 'local_page.html'; <--- this works perfect
//window.open('http://www.google.com', '_self');
}
And the config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget
id="com.example.app" version="0.0.1"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
<preference name="loglevel" value="DEBUG" />
<feature name="Device">
<param name="android-package" value="org.apache.cordova.device.Device" />
</feature>
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
</feature>
<name>TPV_APP</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
Window.location doesn't work. Indeed doesn't show any posible error.
Its just doesnt work.
If window.location redirect to local pages, it works perfectly,
but for external pages it doesnt.
The alert is executed ok.
INFO: In my previous version of Cordova was working without problems.
I need to be redirected within the same webview. Not open another webview or browser.
I have been searching solutions for 2 days.
Any idea will be appreciated.
Thanks.
It's work OK in web browser but when I try to login via email& password I get the error :
Unable to contact the Firebase server
this is how I login :
var auth = $firebaseAuth(firebaseMainRef);
auth.$authWithPassword({ email : email, password : password })
I use: Firebase v2.0.5
this is the confif.xml file:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.myapp501948" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>myApp</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="BackupWebStorage" value="none"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
</widget>
thanks!
Adding cordova plugin of whitelist solves the problem
I have the following config.xml file for my android app, and I am trying to install launchmyapp plugin. Everytime I clean, I get this the following error
/code/platforms/android/res/xml/config.xml:21: error: Error parsing XML: unbound prefix
I checked other stack questions and everyone is pointing to wrong formatting in the parameter fields, but all seems ok...
here is the config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.myappname.Myappname" version="2.2.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyAppName</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<feature name="org.apache.cordova.facebook.Connect">
<param name="ios-package" value="FacebookConnectPlugin" />
</feature>
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
<content src="index.html" />
<access origin="*" />
<gap:plugin name="nl.x-services.plugins.launchmyapp">
<param name="URL_SCHEME" value="myappname" />
</gap:plugin>
</widget>
I've encountered the same question as yours. I supposed it's because
<gap:plugin> must be bound to phonegap prefix.
So I solved this question by adding xmlns:gap="http://phonegap.com/ns/1.0" at node.
In your case, the full <widget> should be:
<widget id="com.myappname.Myappname" version="2.2.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
Hope it works for you.