title: Duplicate http requests sent when using http interceptor (in Ionic 2)
body: <p><strong>TL;DR;</strong></p>
  
  <p>Why subscribing to an <em>Observable</em> in an <em>http</em> interceptor produces duplicate <em>http</em> requests to server?</p>
  
  <p>Sample code:</p>
  
  <pre><code>  doGetWithInterceptor() {
      console.log("Http get with interceptor -&gt; 2 http calls ?? Why?");
      this.http_interceptor_get("http://ip.jsontest.com/").subscribe(data =&gt; {
        console.log("But only one block of data received:", data);
        this.result= data.ip;
      });
    }
  
    http_interceptor_get(url : string)  {
      let req= this.http.get(url).map(res =&gt; res.json());
  
      req.subscribe((data) =&gt; {
        console.log("[HttpInterceptor]");
      });
  
      return req;
    }
  </code></pre>
  
  <p><strong>Full details:</strong></p>
  
  <p>I use an http interceptor service in my Ionic 2 project to globally detect errors, authentication, and more...</p>
  
  <p>But doing so, I am seeing duplicate http requests to the server.</p>
  
  <p>I have an small test App starting from a blank Ionic 2 template:</p>
  
  <p><a href="https://i.stack.imgur.com/UWmMN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UWmMN.png" alt="Test App"></a></p>
  
  <p>Which clearly shows the problem in Firebug:</p>
  
  <ul>
  <li>First request (it's ok, single) if using the GET button.</li>
  <li>Second request (which duplicates) is using the "Get with interceptor" button.</li>
  </ul>
  
  <p>Meanwhile, the code in the subscription part is executed only once, as it should.</p>
  
  <p><a href="https://i.stack.imgur.com/jdSvV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jdSvV.png" alt="Interceptor produces 2 http requests"></a></p>
  
  <p>The home.ts code is as follows:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { NavController } from 'ionic-angular';
  
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
    result : string = "???";
  
    constructor(public navCtrl: NavController, public http: Http) {
    }
  
    http_get(url : string)  {
      return this.http.get(url).map(res =&gt; res.json());
    }
  
    http_interceptor_get(url : string)  {
      let req= this.http.get(url).map(res =&gt; res.json());
  
      req.subscribe((data) =&gt; {
        console.log("[HttpInterceptor]");
      });
  
      return req;
    }
  
    doGet() {
      console.log("Normal http get -&gt; 1 http call");
      this.http_get("http://ip.jsontest.com/").subscribe(data =&gt; {
        console.log("One block of data received:", data);
        this.result= data.ip;
      });
    }
  
    doGetWithInterceptor() {
      console.log("Http get with interceptor -&gt; 2 http calls ?? Why?");
      this.http_interceptor_get("http://ip.jsontest.com/").subscribe(data =&gt; {
        console.log("But only one block of data received:", data);
        this.result= data.ip;
      });
    }
  
    doClearResult() {
      this.result= "???";
    }
  
  }
  </code></pre>