Angular 2: Response to preflight request doesn’t pass access control check


I'm getting a very strange error on my Angular 2 app:

XMLHttpRequest cannot load Response
to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:4200' is therefore not allowed

The annoying thing is that I DO have that header in place:

headers.append("Access-Control-Allow-Origin", "*")
headers.append('Access-Control-Allow-Methods', "GET, POST, PATCH, PUT, DELETE, OPTIONS")
headers.append('Access-Control-Allow-Headers', "Origin, Content-Type, X-Auth-Token")

Screenshot for Charles Proxy:
enter image description here

Best Solution

I found a solution that I liked using a proxy server here:

Configure a proxy for your API calls with Angular CLI