AngularJs mvc Error as Response for preflight has invalid HTTP status code 404

Question

Here when i try to Getting information From Mvc to WebApi Im getting Error as XMLHttpRequest cannot load http://localhost:30952/api/Employee/Auth/. Response for preflight has invalid HTTP status code 404

Control.Js

 $scope.SaveDb = function (emp) {
        if ($scope.Submit == "Save") {
            $scope.submitted = true;
            if ($scope.isFormValid) {
                $scope.loading = true;
                $scope.Submit = "Please Wait........";
                var getting = MyAuthService.GetToken(emp);
            }
        }

Service.Js

   this.GetToken = function (Token){
        var tokens = $http({
            url: ApiUrl+"api/Employee/Auth/",
              headers:{
                'Authorization':'Basic'+btoa(Token)
            },
            method: "PUT",
            data: JSON.stringify(Token),
            content:{'content-type':'application/JSON'}
        }) 
        return tokens;

I Added Cross Origin in Global.asax in WebApi Page

protected void Application_BeginRequest()
        {
            string[] allowedOrigin = new string[] { "http://localhost:11233" };
            var origin = HttpContext.Current.Request.Headers["Origin"];
            if (origin != null && allowedOrigin.Contains(origin))
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", origin);
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST");
                //Need to add more later , will see when required
            }
        }

I added allow-Cross_origin in web.config file

Web.config

<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>