Angular2 : X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers
<p>I am struggling with this issue today as I am implementing a cross-site API call. The worst thing is it works well from my local environment but once on heroku, it fails with the following error:</p>

<blockquote>
  <p>XMLHttpRequest cannot load <a href="https://restcountries.eu/rest/v1/all" rel="noreferrer">https://restcountries.eu/rest/v1/all</a>. Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.</p>
</blockquote>

<p>Here is the function triggering the call:</p>

<pre><code>  let observable = this._http
    .get(GEO_API_URL + query)
    .map(response =&gt; response.json())
    .do(val =&gt; {
      this.cache = val;
      observable = null;
    })
    .share();

  return observable;
</code></pre>

<p>Any idea ?</p>

<p>Thanks.</p>