Vikas Bansal Vikas Bansal - 1 year ago 320
AngularJS Question

AngularJS With Web API: $http post returning XMLHttpRequest cannot load: Response for preflight has invalid HTTP status code 405

When trying to POST json to web api server using $http its returning the following error

XMLHttpRequest cannot load http://localhost:62158/api/video/add.
Response for preflight has invalid HTTP status code 405

but making the same request from
is working file.

$HTTP Code

$, data, config)
.success(function (data, status, headers, config) {
.error(function (data, status, header, config) {

$.ajax Code

$.ajax({ type: "POST",
url: url,
data: newVideo,
success: function (a) {

error: function (e) {

dataType: 'json'
}); web api code and configuration


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


public static void Register(HttpConfiguration config)
// Web API configuration and services

// Web API routes

name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }


var formatters = GlobalConfiguration.Configuration.Formatters;


config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));


api controller

public class VideoController : ApiController
public HttpResponseMessage add([FromBody] db_videos newVideo)
HttpStatusCode statusCode = HttpStatusCode.NotFound;

CommonResult result = new CommonResult() /// default
code = ResultCodes.retry.ToString(),
message = "Not able to complete request. Retry."

if (newVideo.video_file_name == null)
return Request.CreateResponse(statusCode, result);

if (newVideo.video_file_name.Length < 1)
return Request.CreateResponse(statusCode, result);

if (newVideo.insert())
statusCode = HttpStatusCode.OK;
result.code = ResultCodes.successfull.ToString();
result.message = "Video is added";

return Request.CreateResponse(statusCode, result);

Answer Source

@Rakeschand you were right and it was the issue of cors


I installed Cors in my project using nu-get command line

Install-Package Microsoft.AspNet.WebApi.Cors

and added the follwoing code in WebApiConfig.cs file from App_Start folder.

var enableCorsAttribute = new EnableCorsAttribute("*",
                                               "Origin, Content-Type, Accept",
                                               "GET, PUT, POST, DELETE, OPTIONS");

and removed the following from the web config

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

$http started working just like the $.ajax was working

but these things left me with some confusion. I would be great full if anyone can elaborate

  1. why the $.ajax was working and $http was not working
  2. I did the same thing by cors the I had done in web.config then why did cors worked but web.config didn't?
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download