Angular: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true

I know there are a lot of questions concerning CORS already but they don’t seem to answer my question.

So I have a client app written in Angular which will be used to create a mobile app (with Apache Cordova). The html files and JavaScript files will be loaded from the mobile device.
When I simulate that and I send requests to the REST API server I first got
“No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:82‘ is therefore not allowed access”.
So I added header(“Access-Control-Allow-Origin: *”); in my php REST API Server. I cannot specify a specific domain as the requests will come from the mobile devices.

Now I got to “A wildcard ‘*’ cannot be used in the ‘Access-Control-Allow-Origin’ header when the credentials flag is true.”

I finally found a solution but I’m not sure it is safe to keep it like this.

In my php REST API Server I added this:

if (isset($_SERVER['HTTP_ORIGIN'])) {
  header("Access-Control-Allow-Credentials: true");
  header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
  header("Access-Control-Allow-Headers: *, X-Requested-With, Content-Type");
  header("Access-Control-Allow-Methods: GET, POST, DELETE, PUT");
}

Please advise on this way of working. If it is not secure or no good at all, can you please tell me how to solve this issue?

Thanks a lot!

Phonegap pictureSource.PHOTOLIBRARY doesn't work with angular

Without angular it’s work fine:

<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Album</button>
<script type="text/javascript">
function onPhotoURISuccess(imageURI) {
  alert(imageURI)
}

function getPhoto(source) {
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
    destinationType: destinationType.imageURI,
    sourceType: source });
}

function onFail(message) {
  alert('Failed because: ' + message);
}
    </script>

But when I’m trying to use angular 2 and my code doesn’t work:

<button (click)="getPhoto(pictureSource.PHOTOLIBRARY)">From Photo Album</button>

getPhoto(source) {
    alert(111);
    navigator.camera.getPicture(this.onSuccess, this.onFail, { quality: 50,
        destinationType: navigator.camera.DestinationType.imageURI,
        sourceType: source });
}
onSuccess(imageData) {
    this.photo = imageURI;
}
onFail(message) {
    alert('Photo not loaded, because: ' + message);
}

When I click on the button, getPhoto function doesn’t work. Because of pictureSource.PHOTOLIBRARY in the function.

How to use Onsen-UI 2 beta and Angular2 in Monaca?

how can I setup a Monaca Project to use Onsen-UI 2 AND Angular2? I tried the following: Config -> Manage JS/CSS Components… When I search for Angular2 the do actually see angular2. However, the available versions don’t contain 2.x, right now 1.5r1 is the highest available version. Am I missing something or is it just not possible right now? And if not, does anyone have a good guide so setup a PhoneGap + Angular2 + Onsen UI 2 environment?

Using PhoneGap, Angular2 TS and Onsen UI 2

I’m struggling to get a project running using PhoneGap, Angular2 for TypeScript and Onsen UI 2. The idea is to build the app for the different platforms using PhoneGap/Cordova, writing the application logic with Angular2 and the layout with Onsen2. However, since Angular2 and Onsen UI 2 are still in beta I couldn’t find some documentation/papers/tutorials/books to get things started. I got Angular2+Onsen2 running, well at least a little bit… And I got PhoneGap and Onsen running, but all three won’t work together. Does anyone have any tips/tutorials how to melt all three (for themselves pretty awesome) frameworks? I feel like I’m just missing the trick how to get them work together

Cordova, Angular2 & HTML5 Video

I’m trying to get something related to HTML5 videos working using Angular2 inside Cordova.

So far, this is what I achieved:

<video autoplay="true" loop="true" preload="auto" controls width=300 height=300 webkit-playsinline>
    <source [src]="video.url" type="video/quicktime">
</video>

My video source is loaded from the network, and filled in correctly (the video object is correctly filled with a valid url (it works on my native ios app).

The only thing I can see displayed is the default poster, I can’t play the video.

Did anyone managed to make this work ?

(I am deploying on an Android)

Hiding element in ionic2: Can't bind to '*ngIf' since it isn't a known native property

I have a problem with DOM elements in my ionic2 app. When I trying do something like this:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="el1" tabIcon="list-box"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="el2" tabIcon="git-pull-request"></ion-tab>
  <div *ngIf="'admin'=='admin'">
    <ion-tab [root]="tab4Root" tabTitle="Admin" tabIcon="cog"></ion-tab>
  </div>
  <ion-tab [root]="tab3Root" tabTitle="Profile" tabIcon="person"></ion-tab>
</ion-tabs>

everything is OK. But when I set angular variable in constructor:

export class TabsPage {
  constructor() {
    this.userRole = "admin";

and

<ion-tabs>
      <ion-tab [root]="tab1Root" tabTitle="el1" tabIcon="list-box"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="el2" tabIcon="git-pull-request"></ion-tab>
      <div *ngIf="{{userRole}}=='admin'">
        <ion-tab [root]="tab4Root" tabTitle="Admin" tabIcon="cog"></ion-tab>
      </div>
      <ion-tab [root]="tab3Root" tabTitle="Profile" tabIcon="person"></ion-tab>
    </ion-tabs>

the application returns me an error:

Can’t bind to ‘*ngIf’ since it isn’t a known native property

How I can hide this element when userRole = 'admin'?

Ionic2 + cordova-plugin-sketch

This is the plugin I’m trying to use:
https://github.com/blinkmobile/cordova-plugin-sketch

Q) I’m trying to get the cordova sketch plugin working so I can annotate an image, but can’t get this to initialise properly. What am I doing wrong?

The page loads fine and I don’t get any error alert, which is the second callback function you can see.

Yes, I’m running on the device. I know cordova plugins don’t work in the browser.

Page:

<ion-navbar *navbar header-colour>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Sketch</ion-title>
</ion-navbar>
<ion-content padding>
  <img #sketchElement src="img/sketchpad.jpg" height="400" width="600"/>
</ion-content>

Class:

import {NavController, NavParams} from 'ionic-framework/ionic';
import {Page, ViewController, Platform, Alert, Modal, Events} from 'ionic-framework/ionic';
import {forwardRef} from 'angular2/core';
import {OnInit, OnDestroy} from 'angular2/core';
import {ViewChild, ElementRef} from 'angular2/core';


@Page({
  templateUrl: 'build/pages/sketch/sketch.html'
})
export class SketchPage {
  @ViewChild('sketchElement') sketchElement:ElementRef;

  constructor(
    private _platform: Platform,
    private _nav: NavController,
    private _viewController: ViewController,
    private _events: Events) {
  }

  ngOnInit() {
    this._platform.ready().then(() => {
      if(navigator && navigator.sketch) {
        navigator.sketch.getSketch(
          function() {
          },
          function(message) {
            alert(message);
          },
          {
          destinationType: navigator.sketch.DestinationType.DATA_URL,
          encodingType: navigator.sketch.EncodingType.JPEG,
          inputType : navigator.sketch.InputType.FILE_URI,
          inputData : this.sketchElement.nativeElement.src
        });

        alert('done')
      }
    });
  }
}

Thanks!

Content-Security-Policy with Ionic and Socket.IO

I need to use a socket.io connection in my ionic2 app.

I installed socket.io-client via npm so i can use it like this.

import * as io from 'socket.io-client'
...
...
this.socket = io(this.conf.connectionServer);
this.socket.on('connect', () =>{
...
...})

I does work when i’m using ionic serve in chrome or when running ionic run -l
but when i just build or run everything with ionic run it won’t work.

i was able to log the error messsge on the screen of my android-device:

Error: Failed to execute: open: on :XMLHttpRequest:: Refused to connect to : http://file/socket.io/?EIO.....: because it violates the documents Content Security Policy.....

My Content Security Policy is:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self';                                                                                                                                ;
        style-src 'self' 'unsafe-inline'; 
        script-src 'self' 'unsafe-inline' 'unsafe-eval'
                    http://localhost:*
                    http://127.0.0.1:*

                    ;
        connect-src 'self'
                    ws://*
                    http://141.xx.xx.25:*
                    http://*.foobar.de
                    http://file/socket.io*
                    ;

        img-src *;
        media-src *
    ">

But i cant find the right solution.I

In Chrome the connection goes to: http://141.XX.XX.25/socket.io/
but on android it trys to connect to http://file/socket.io/

Even if I set it to default-src *; the Socket.io-Connection will only work when using Serve or run with the Livereload-option

I’m using:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS:
Node Version: v5.6.0

Angular 2 items don't update when changed from phonegap notification dialog

I am building an phonegap app with angular2.
I want to show a confirmation dialog and in success callback to update elements from angular2 view. When I do this nothing happens right away, but if I update other model on the page (what is linked with angular) my update is updated.

For confirmation dialog I use phonegap plugin: cordova-plugin-dialogs and the method called is: navigator.notification.confirm(...).

Here is my full code of my Component:

AboutComponent = ng.core
    .Component({
        selector: 'rl-about',
        templateUrl: 'app/components/about/view.html',
        directives: [TopBarComponent, ng.router.ROUTER_DIRECTIVES]
    })
    .Class({
        constructor: [Config, function(config) {
            this.config = config;

            this.title = "About";
            this.top_bar_left = "Back";
        }],
        /**
         * Back btn
         */
        topBarLeftClick: function(){
            window.history.back();
        },
        changeMessage: function(){
            this.message = "Test";
            var self = this;
            navigator.notification.confirm(
                "Delete this?",
                function(buttonIndex) {
                    if(buttonIndex == 1) {  //1 = Ok
                        console.log("Message before: " + self.message)  //self.message has the old value ("Test")
                        self.message = "Deleted";
                        console.log("Message after: " + self.message) //self.message has the new value ("Deleted"), but nothing changed on view.html
                    }
                },
                "Confirm Delete",
                ["Delete", "Cancel"]
            );
        }
    });

And the html looks like this:

<div class="page-wrapper">
    <rl-top-bar [title]="title" [top_bar_left]="top_bar_left" (topBarLeftClick)="topBarLeftClick()" ></rl-top-bar>
    <div class="about-info-wrapper">
        <input type="text" [(ngModel)]="other_model" id="itemtoclick"/>
        {{message}}
        <div (click)="changeMessage()">click here</div>
    </div>
</div>

{{message}} is not updating when the callback of navigator.notification.confirm is called, but it’s updated if I click for example on input box which is linked to an angular model

One hack that I found that is working is to click something from javascript when callback is called. Like this: window.document.getElementById('itemtoclick').click()

I try to add .bind(this) to navigator.notification.confirm(...) but it’s throwing error.

I try to save this to a variable before calling navigator.notification.confirm but same result.

Same result if I .bind(this) to callback method.

Somehow I have reference to this inside callback because I can read and update, but angular2 doesn’t know that I made a change to update the view.

Also this problem is only on mobile, if I try to run on browser (chrome) it’s working ok. I use phonegap build to create the .apk file for android.
But the problem is also visible if I use Phonegap mobile app for live testing.

I want to know if there is a solution that will not involve a hack like this.

Edit

This is my first phonegap app

For Android I am using phonegap build

For iOS I am using phonegap CLI

The problem is in both Android and iOS.

Edit 1 Apr 2016

I created a video to better describe the problem: See here

Also I change to not using this for onDeviceReady and the problem is still here.
Here is my main.js code:

var phonegapApp = {
    initialize: function() {
        phonegapApp.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', phonegapApp.onDeviceReady, false);
    },
    onDeviceReady: function() {
        console.log("phonegapApp onDeviceReady");
        ng.platform.browser.bootstrap(AppComponent,[
            ng.http.HTTP_PROVIDERS,
            ng.router.ROUTER_PROVIDERS,
            new ng.core.Provider(ng.router.LocationStrategy, {useClass: ng.router.HashLocationStrategy})
        ]);
    }
};

And from index.html I call phonegapApp.initialize(); at the bottom of my body.