Angular2: http.get returns "No 'Access-Control-Allow-Origin' header is present on the requested resource."

I'm getting the following error:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

when making the following request to my web api from my angular2 app:

     return this.http.get("http://localhost/api/test", { headers })
    .map(res => this.extractData(res))
    .catch(this.handleError);

Some considerations:

• Requests work fine when they don't include headers. This one includes headers for authentication purposes.
• I can make the request using Chrome.
• Microsoft.Owin.Cors is installed in the solution
• app.UseCors(CorsOptions.AllowAll); is at the start of the configuration method of startup.cs

The following is included in the web.config file:

 <system.webServer>
<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" />
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionControllerv4.0" />
</handlers>

thanks!