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

Question

I have a webapi and webapp running in vs local debug mode and I'm receiving a cors error.

Access to XMLHttpRequest at 'http://localhost:64335/token' from origin 'http://localhost:64333' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've tried tons of things to solve this. Can someone tell me what I am doing wrong?

I tried setting in webapi

  <customHeaders>        
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Credentials" value="true"/>
    <add name="Access-Control-Allow-Methods" value="GET, PUT, OPTIONS, POST, DELETE, HEAD" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
    <!--<add name="X-Frame-Options" value="SAMEORIGIN" />-->
  </customHeaders>
</httpProtocol>

that didn't work. then I tried checking in webapi, the application_beginrequest

        protected void Application_BeginRequest(object sender, EventArgs e)
    {

        //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

        string[] allowedOrigin = new string[2];
        allowedOrigin[0] = "http://localhost:64335";
        allowedOrigin[1] = "http://localhost:64333";            

        var origin = HttpContext.Current.Request.Headers["Origin"];
        if (origin != null && allowedOrigin.Contains(origin))
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", origin);

            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");

                //These headers are handling the "pre-flight" OPTIONS call sent by the browser
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE,HEAD,TRACE");
                //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
                //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
                //HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }                                              
        }

that did not work either. I keep getting this error message

Access to XMLHttpRequest at 'http://localhost:64335/token' from origin 'http://localhost:64333' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

anyone see what I am doing wrong?

this is what I see when I inspect the traffic