http.put throwing error in Angular 2 / Web API using Chrome but not IE

Question

I'm trying to get angular 2 working with web api in a test learner project, but I've hit a question with http.put and wondering if anyone can shed some light on it.

I can POST an object to the web api and I can GET data from it.

I'm having problems with PUT, using Chrome. The reason I'm saying using Chrome is that it doesn't work in Chrome but does work in IE -not often you say that;)

The angular 2 method I'm using is this. If I replace PUT with POST I can hit the breakpoint in my web api controller, but using PUT no can do.

    updateUser(user: UserModel) {

    let body = JSON.stringify(user);
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let url: string = 'http://localhost:57465/api/user';

    this.http.put(url, body, { headers: headers })
        .map((res: Response) => res.json())
        .subscribe((res2) => {
            console.log('subscribed');
        });
}

Console Chrome error message I'm when using put:

XMLHttpRequest cannot load http://localhost:57465/api/user. Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

EXCEPTION: Response with status: 0  for URL: null

The web api methods are straight out of the box. I'm not doing anything with them yet. If I put a break point on POST it will get hit, not though for PUT.

        // POST api/user
    public void Post(User user)
    {
    }

    // PUT api/user/5
    public void Put(User user)
    {
    }

The web api access control methods are being set in the Global.asax

        protected void Application_BeginRequest(object sender, EventArgs e)
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Request-Method", "GET ,POST, PUT, DELETE");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin,Content-Type, Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "86400"); // 24 hours
            HttpContext.Current.Response.End();
        }
    }

Shouldn't it all work for PUT like it does for POST. How comes it works in IE?

Any ideas?

Answer 1

Ok I got this working. The angular2 side is fine. Web API needed amending.

I changed BeginRequest to this

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
        if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
        {
            Response.Flush();
        }
    }

Put the CustomHeaders back to web.config

  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
  </customHeaders>

That's it.