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!

abstract states and multiple views in angular 2

I’d like to migrate a little prototype from Ionic 1.1.1 with Angular 1.4.7 to Ionic 2 with Angular 2.0.0-beta.1. In my current prototype I use the Angular ui-router with abstract states and nested views.

Here’s the view mystate.html:

...
<ion-content scroll="false" class="mainPage">
    <div class="row">
        <div class="col col-33">
            <ion-nav-view name="left"></ion-nav-view>
        </div>      
        <div class="col col-67">
            <ion-nav-view name="right"></ion-nav-view>
        </div>
    </div>
</ion-content>
...

Here are the defined states:

...
.state('mystate', {
    abstract: true,
    templateUrl: 'app/ordering/views/mystate.html',
    url:'/ordering'
})
.state('mystate.home', {
    cache: false,
    url:'/home',
    views: {
        'left': {
            templateUrl: 'app/mystate/views/leftviewHome.html'
        },
        'right': {
            templateUrl: 'app/mystate/views/rightviewHome.html'
        }
    }
})
.state('mystate.leftA', {
    url:'/leftA',
    views: {
        'left': {
            templateUrl: 'app/mystate/views/leftViewA.html'
        }
    }
})
.state('mystate.rightA', {
    url:'/rightA,
    views: {
        'right': {
            templateUrl: 'app/mystate/views/rightViewA.html'
        }
    }
})
...

The Angular ui-router allows the following:

  • Load two different templates at once (e.g. mystate.home).
  • Load nested views independently from each other (e.g mystate.leftA and mystate.rightA).

So I have no clue how to achieve this with the Angular2 router. Can someone give me an example or a hint on how to proceed.

angular2 http.post method throws typeerror{} exception

I tried to change the existing angularjs library to angular2 for my need. http.post method in the below code throws TypeError {} as exception. Someone please help as i am stuck on this.

login() {
  return new Promise((resolve, reject) => {
    if(typeof jsSHA !== "undefined") {
      var signatureObj = (new OauthUtility()).createSignature("POST", this.magentoOptions.baseUrl+"/oauth/initiate", this.oauthObject, {oauth_callback: "http://localhost/callback"}, this.magentoOptions.clientSecret, null);                                   
      let headersInitiate = new Headers();
      headersInitiate.append('Authorization',signatureObj.authorization_header);
      headersInitiate.append('Content-Type','application/x-www-form-urlencoded');
      let url = this.magentoOptions.baseUrl + "/oauth/initiate";
      let callback = "oauth_callback=http://localhost/callback";

      try{
        this.http.post(url, callback,{headers: headersInitiate})
         .subscribe(
          (result) => {
          console.log("i am inside");
          var rParameters = (result).split("&");
                            .....
      }
      catch(Exception){
        console.log(Exception)
      }

Icon inside angular 2 component no longer working

Updated to “ionic-framework”: “2.0.0-alpha.53” from a much earlier version. And added this dependency: “ionicons”: “3.0.0-alpha.3”.

I was using this in my html for an Angular 2 component. There is no ionic content in this html other than me trying to use the ion icons.

<div class="saveButton icon ion-md-add"
    (click)="onSaveSelected()"></div>

This worked in alpha 42. How do i use ionic icons in an angular 2 component? I have tried the following:

<div class="saveButton icon ion-md-add"
    (click)="onSaveSelected()">

    <ion-icon name="heart"></ion-icon>
</div>

This just shows a blank div.

Whenever i use this line <ion-icon name="heart"></ion-icon> inside of a <ion-menu> it works fine.

Thanks

Ionic 2 Livereload

When developing with Ionic 2 how does one stay on the current page when making code changes? In Ionic 1 livereload would take you back to your current url – however in ionic 2 there are no urls.

Is there a setting that will make livereload keep me on the current page?

I’m open to enabling URLs as well if that’s what it takes to not have to manually navigate back to my page on every code change. However I haven’t been able to find how to do that in the v2 docs yet.

Ionic2 + Angular2 passing configuration to dependency

I want to set global configuration file or from app.ts.

Pass configuration, which can be used on our dependency injection automatically

Api.ts Service

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http'

@Injectable()
export class Api {

    constructor(private http: Http) {}

    login (username, password)
    {
        return this.http.get(`../?client_id=${clientId}&client_secret=${clientSecret}&grant_type=password&username=${username}&password=${password}`).map(res => res.json());
    }
}

How can I pass client id and client secret to api dependency globally from typescript angular2?

ionic2 + angular2 navigate to global pages on click

Ionic 2 comes with side menu and it is define on globally. (I have removed side menu)

I have created settings page and added cog button on the nav button, but how can I set link on it, so it can redirect.

I can do it from within that page, but I want to know how I can set global function or link, which just navigate to that page.

     <ion-navbar *navbar>

        <ion-title>My First List</ion-title>

        <ion-buttons end>
            <button light (click)="openPage('test')">
                <ion-icon name="cog"></ion-icon>
            </button>
        </ion-buttons>

    </ion-navbar>

openPage function is app.ts function, which is giving error.

TypeError: l_context.openPage is not a function

I’m not sure how to do this correctly.

Cannot find module Ionic TypeScript Atom project

Anyone know why I’m getting the two errors below please?

  • Cannot find module ‘./services/TodosService
  • Cannot find module ‘./objects/todo

The component ‘my-todos.ts‘ is in the highlighted ‘Pages‘ directory.
The two problematic files are in the ‘objects‘ and ‘services‘ directories.

Things I’ve tried:

  • ../../app/
  • /
  • app/

Thanks!

enter image description here