simple get angular4 error: Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response

Question

A simple get angular4 error: Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.

url: string = 'https://api.elasticemail.com/mailer/status/log?format=json&username=mymail@mail.com&api_key=my-key;

private readData() {
  this._http.get(this.url)
  .subscribe(
  data => this.extractData(data),
  err => this.handleError(err)
  );
}

private extractData(res: Response) {
  console.log("generate teste")
  let body = res.json();
  console.log(body);
  return body.data || {}; 
}

How to solve this problem?

This is a CORS issue. You're making a call to a domain that is different from the one the JavaScript was served from. So it's not really Angular, but CORS and the same-origin policy: https://en.wikipedia.org/wiki/Same-origin_policy CORS is Cross-origin resource sharing — Rob Zuber, Jun 20 '17 at 03:09
But I have no response control on the request link, how can I configure this by angular? Thanks for listening — Nikolas Soares, Jun 20 '17 at 12:00
This question already has an answer here: https://stackoverflow.com/questions/38589944/angular2-x-xsrf-token-is-not-allowed-by-access-control-allow-headers/43021066#43021066 — Ray Chen, Oct 27 '17 at 03:07

score 0 · Answer 1 · answered Feb 17 '18 at 07:17

In Windows, paste this command in run window

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
this will open a new chrome browser which allow access to no 'access-control-allow-origin' header request.

Reference

Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?

simple get angular4 error: Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response

1 Answers1