title: Angular HttpClient returns an error in Safari iOS but works on desktop
body: <p>I'm using Angular 5.2.2 and CLI 1.6.5, I have a component with method</p>
  
  <pre class="lang-js prettyprint-override"><code>getRecentMattersForUser(userId: string) {
      this.matterService.getRecentMattersForUser(userId)
          .subscribe(matters =&gt; {
          this.matters = matters;
      },
      error =&gt; this.errorMessage = JSON.stringify(error));
  }
  </code></pre>
  
  <p>Service</p>
  
  <pre class="lang-js prettyprint-override"><code>getRecentMattersForUser(userId: string): Observable&lt;Matter[]&gt; {
      const matterService = environment.serviceBaseUrl + '/Matters?requestFor=' + userId;
      const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  
      return this.http.get&lt;Matter[]&gt;(matterService, {
          withCredentials: true,
          headers: headers
      });
  }
  </code></pre>
  
  <p>On my desktop this lists matters nicely with an <code>*ngFor</code> but in Safari on iOS errorMessage prints:</p>
  
  <blockquote>
    <p>{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for (unknown url): 0 Unknown Error","error":{"isTrusted":true}}</p>
  </blockquote>
  
  <p>What's the difference?</p>
  
  <p>I used to use the old <code>Http</code> (instead of <code>HttpClient</code>) like so</p>
  
  <pre class="lang-js prettyprint-override"><code>private options = new RequestOptions({ 'withCredentials': true });
  
  getRecentMattersForUser(userId: string): Observable&lt;any&gt; {
      const matterService = environment.serviceBaseUrl + '/Matters?requestFor=' + userId;
  
      return this.http.get(matterService, this.options)
          .map(this.extractData);
  }
  </code></pre>
  
  <p>Which still works.</p>
  
  <p>Any ideas?</p>