title: httpClient request is called twice in angular4
body: <p>I call API in my angular4 application using httpClient, but the API is called twice, the first call method is OPTIONS while the second is Get.</p>
  
  <p><strong>Component.ts:-</strong> </p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import { UserService } from './Services/User.service';
  
  @Component({
    selector: 'user-component',
    templateUrl: './user-component.component.html',
    styleUrls: ['./user-component.component.scss'],
    encapsulation: ViewEncapsulation.None
  })
  
  export class UserComponent implements OnInit {
  
    apiResponse : any;
    status      : any = 'active';
  
    constructor(private service: UserService) { } 
  
    ngOnInit() {
       this.getResult();
    }
  
    getResult()
    {
       this.service.getUser(this.status)
       .subscribe(res =&gt; {this.apiResponse = res},
                  err =&gt; console.log(err),
                  ()  =&gt; console.log(this.apiResponse)  
                );
  
    }
  }
  </code></pre>
  
  <p><strong>Component.html:-</strong> </p>
  
  <pre><code>&lt;pre&gt;{{apiResponse |json}}&lt;/pre&gt;
  </code></pre>
  
  <p><strong>User.service.ts:-</strong> </p>
  
  <pre><code>import { Injectable,Inject } from '@angular/core';
  import { HttpClient, HttpParams } from '@angular/common/http';
  import 'rxjs/add/operator/map';
  
  interface Response {
    response : any;
  }
  
  @Injectable()
  export class UserService {
    apiUrl : any='http://localhost/MyProject/';
    constructor( private http: HttpClient) {}
  
    public getUser(status: any)
    {
       let httpParams = new HttpParams().set('status', status);
       return this.http.get&lt;Response&gt;(this.apiUrl+"users", {params: httpParams}).map(response =&gt; response.response);
    }
  }
  </code></pre>
  
  <p>The API is called twice, please tell me how solve this problem? </p>