I'm trying to send an HTTP GET request and everything works great while I'm testing. But when I build the application and try to send request, I'm getting 404 error.
Here is my index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<access origin="*" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<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 *; connect-src http://google.com">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
var start = Date.now();
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
if(xmlhttp.status == 200){
//alert(Date.now() - start);
alert("yeah");
}
else if(xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert("else: " + xmlhttp.status);
}
}
}
xmlhttp.open("GET", "http://google.com", true);
xmlhttp.send();
</script>
</body>
I'm new to PhoneGap and I'm sure this is as simple as it gets, but I can't find anything on google.
Thanks in advance
It is likely that you need to set a Content Security Policy meta tag in your index.html as Cordova / PhoneGap 5 or higher will require this.
An example would look like this (in the head section of index.html):
<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 *; connect-src http://myserver">
Swapping http://myserver for the server you're trying to access. You may actually be getting error messages such as this in the JS Console if this is your problem:
Refused to connect to ‘http://myserver/ping' because it violates the following Content Security Policy directive: “default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’”. Note that ‘connect-src’ was not explicitly set, so ‘default-src’ is used as a fallback.
SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
This post may help with understanding Content Security Policy.
Here I have assumed that you are using Phonegap version "cli-5.2.0" and facing issue on Android. To fix 404 issue, add following lines in your config.xml file
<gap:plugin name="cordova-plugin-whitelist" source="npm" />
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
Whitelist plugin is required to use with Phonegap "cli-5.2.0" to successfully make request to any server.
Link for whitelist plugin https://github.com/apache/cordova-plugin-whitelist
Related
This issue has been driving me crazy for one week:
Google Maps works on a browser but not on the device, I have already removed all the plugins and the Android platform, then reinstalled platform and plugins but the map does not work on the device. The code :
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; script- src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="build/main.css" rel="stylesheet">
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
and contains all code in `node_modules` -->
<script src="build/vendor.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAa1urkW-Vbj-K 82Ry9jw8rPHOrXVZ_9SU"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
</body>
</html>
Any help, please !
EDIT
As you can see on the image bolow, the mpa load, but does not display !
EDIT 2 :
I have found where the issue comes from, this portion of the code works and log correctlly :
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(this.showMap, this.showError, { enableHightAccuracy: true })
console.log(google);
}
But the "this.showMap" function does not execute.
Any suggestion ?
On a new project, it seems I do not get the deviceready event fired with cordova-android 6.1.2 as it used to be in previous versions of Cordova.
I do not have any plugin installed.
<!DOCTYPE html>
<html>
<head>
<title>My Project</title>
<meta charset="UTF-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
<link rel="stylesheet" href="my.css">
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
function onDeviceReady() {
console.log('deviceready');
}
document.addEventListener('deviceready', onDeviceReady, false);
</script>
<script src="index.js"></script>
</body>
</html>
You need to reference Cordova.js like this:
<script type="text/javascript" src='Path_Of_Folder/Cordova.js>
Replace Path_Of_Folder with your path.
The mfilechooser plugin to work for my cordova based app on the android emulator or device. No errors are reported but the chooser is not launching.
Here is the snippet of my code.
index.js
function choose(){
window.plugins.mfilechooser.open([], function (uri) {
alert(uri);
}, function (error) {
alert(error);
});
}
function onDeviceReady() {
}
function domLoaded(){
document.addEventListener("deviceready", onDeviceReady, false);
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy"
default-src 'self';
connect-src *;
style-src 'self' data: chrome-extension-resource: 'unsafe-inline';
img-src 'self' data: chrome-extension-resource:;
frame-src 'self' data: chrome-extension-resource:;
font-src 'self' data: chrome-extension-resource:;
media-src *;>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
</head>
<body onload="domLoaded()">
<div>
<h1>Apache Cordova</h1>
</div>
<div>
<button onClick="choose()">choose file</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Cordova 6.3.1
file chooser : https://github.com/MaginSoft/MFileChooser
Thanks for your help
Your CSP probably don't allow you to run inline javascript, so the onclick is not doing anything.
Try adding this in your Content-Security-Policy meta tag
script-src 'unsafe-inline';
I am building an simple cordova app with my project. It has 2 levels of nesting (main route) -> child route -> (another child route). When trying to browse to the 2nd level (another child route) I get an error saying Exception: Error during instantiation of t! Primary outlet already registered. First level works fine. I have not used router outlet twice in any template. The issue is the same in the emulation of browser as well as android.
Attached the chrome inspect below.
My HTML File
<html>
<head>
<base href="./">
<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 *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<link href="assets/css/skins/skin-white.css" rel="stylesheet" type="text/css" />
<title>Hello World</title>
</head>
<body>
<main-app>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
</div>
</div>
</main-app>
<head>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/angulardeps/2.0.0-beta.9/shims_for_IE.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/es6-shim.min.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/system-polyfills.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/angular2-polyfills.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/system.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/Rx.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/angular2.dev.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/router.min.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/http.min.js"></script>
<script src="assets/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
My build source structure:
My main component:
import {Component} from 'angular2/core';
import {ApproutesComponent} from '../app/approutes';
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router';
#RouteConfig([
{path: '/d/...', component: ApproutesComponent, name: 'ApproutesCmp', useAsDefault:true}
])
#Component({
selector: 'main-app',
templateUrl: 'app/r/main/rmain.html',
directives:[ROUTER_DIRECTIVES]
})
export class RroutesComponent {
constructor(){}
}
I had the same problem with angular2 beta11, just not using cordova.
According to a post here you should use the non-minified version of router.js.
Sounds strange, but it worked for me.
We are building a android application using Ionic (+Cordova).
It all works in my browser, but when I build it and run the .apk this happens:
External images won't appear, and embeded google maps remain empty. The following code at our index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
</ion-header-bar>
<ion-content>
<div class="main" role="main">
<p id="geolocation">Finding geolocation...</p>
<img src="http://placehold.it/350x150.png" alt="no image" />
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d635472.0298105411!2d5.1189025!3d51.525825749999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1432033961557" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
</ion-content>
</ion-pane>
</body>
</html>
In the config.xml we've created the following lines just after the closing tag of :
<allow-navigation href="*" />
<allow-intent href="*" />
Check your manifest to allow your app to use internet.
<uses-permission android:name="android.permission.INTERNET" />
If you are using cordova 5 (Android platform version 4.0.0) then you should include the whitelist plugin and also the new content security policy meta tag to allow google maps api to load like this (on the top of your html file along with the rest meta tags):
<meta http-equiv="Content-Security-Policy" content="default-src *;
style-src 'self' 'unsafe-inline' http://fonts.googleapis.com/;
script-src 'self' 'unsafe-inline' 'unsafe-eval' http://*.googleapis.com
http://maps.gstatic.com;">
EDIT:
Check also your config.xml what access you give:
<access origin="*" />
for instance to allow all connections
If it doesn't work please check your logs and post any errors.
No forget add
android:usesCleartextTraffic="true"
into application tag on AndroidManifest.xml
After test into real device.