Angular 2 & ionic 2 http request with basic authentification error

I have some problems with Angular 2 http get request in a ionic 2 application.

In fact I have a website (made with the Jalios CMS) which is running currently with an Apache tomcat on localhost:8080 and I want to access data from my ionic app with RESTful Web services. To access to this website the users need to log in, and their passwords can contain special charactere like @,#.:?

When I use the cURL command, I can access data without any problems. Data are returned in xml.

curl -u username:p@ssword http://localhost:8080/jcms/rest/data/Article

However in my ionic 2 application I have the following errors:

• OPTIONS http:/ /localhost:8080/jcms/rest/data/Article 401 (Non-Autoris%E9). polyfills.js:3

• XMLHttpRequest cannot load http:/ /localhost:8080/jcms/rest/data/Article. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:/ /localhost:8100' is therefore not allowed access. The response had HTTP status code 401. (index):1

• ERROR Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}. core.es5.js:1084

my http provider: rest-service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class RestService {
  constructor(public http: Http) {
    console.log('Hello RestService Provider');
  }
  httpGet(username: string, password: string, resource: string){
    let url = 'http://localhost:8080/jcms/rest/data/' + resource;
    let headers: Headers = new Headers();
    headers.append("Authorization", "Basic " + btoa(username + ":" + password));
    return this.http.get(url, {headers: headers});
  }
}

my Ionic page (component): home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {RestService} from "../../providers/rest-service";
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  result: Array<any>;
  constructor(public navCtrl: NavController, private  restService: RestService) {
    this.restServiceGet();
  }

  restServiceGet(){
    this.restService.httpGet('username', 'p@ssword', 'Article')
        .map(res => res.json())
        .subscribe(data => this.result = data);
  }
}

Normally all have been correctly imported in the app.module.ts file. I also try to change the special character by URL Encoding (%40 for @), and replace the btoa directly by the base 64 equivalence of username:p@assword.

Can you help me to correct this errors? Especially the 401 unauthorized because I d'ont understand why it happen whereas I implemented the headers with the basic authentification. Where are my mistakes?

Thank you