title: angular: httpClient request is called twice
body: <p>I am trying to call my api as follow:</p>
  
  <p>MyComponent.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { ActivatedRoute } from '@angular/router';
  import { Api } from '../../services/Api';
  import { Account } from '../../models/Account';
  
  @Component({
    selector: 'app-account-individual',
    templateUrl: './account-individual.component.html',
    styleUrls: ['./account-individual.component.css']
  })
  export class AccountIndividualComponent implements OnInit {
  
    account_id: number;
    account: Account = new Account();
  
    constructor(private route: ActivatedRoute, private proxy: Api) {
      this.proxy.postClient('api-get?call=get-account', { "id": 1 }).subscribe(
        res =&gt; {
          console.log(res);
        }
      );
    }
  
    ngOnInit() {
      this.route.params.subscribe(params =&gt; {
        this.account_id = params['id'];
      });
    }
  }
  </code></pre>
  
  <p>Api.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers, Response, RequestOptions } from '@angular/http';
  import { Observable } from 'rxjs';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/toPromise';
  import * as Globals from 'Globals';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable()
  export class Api {
  
      api_url = "http://localhost/MyProject/";
  
      constructor(private http: Http, private httpClient: HttpClient) { }
  
      fetchData(url) {
          return this.http.get(this.api_url + url).map(this.extractData).catch(this.handleErrorPromise);
      }
  
      postClient(url: string, data?: any){
          return this.httpClient.post(this.api_url + url, data);
      }
  
      private extractData(res: Response) {
          let body = res.json();
          return body||{};
      }
  
      private handleErrorObservable(error: Response | any) {
          console.error(error.message || error);
          return Observable.throw(error.message || error);
      }
  
      private handleErrorPromise(error: Response | any) {
          console.error(error.message || error);
          return Promise.reject(error.message || error);
      }
  }
  </code></pre>
  
  <p>server CORS:</p>
  
  <pre><code>public function actionApiGet($call){
          header('Access-Control-Allow-Origin: *');
          header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
          header('Access-Control-Allow-Headers: x-test-header, Origin, X-Requested-With, Content-Type, Accept');
          $data = json_decode(file_get_contents('php://input'), true);
  ...
  </code></pre>
  
  <p>but the api is called twice, the first call method is <code>OPTIONS</code> while the second is <code>POST</code></p>