title: Angular2 : X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers
body: <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>