Ajax CORS call not working for application/json - ajax

Question

My following code is working fine and I am able to call API
$.ajax({
url: "http://localhost:57786/mvc/create",
method: "POST",
data: { FirstName: "ABC", LastName: "XYZ" },
success: function (data) {
alert("Success");
},
error: function (statusText, error) {
alert("Error");
}
});
But following code is not working and I am not able to call API
$.ajax({
url: "http://localhost:57786/mvc/create",
method: "POST",
data: JSON.stringify({ FirstName: "ABC", LastName: "XYZ" }),
contentType: "application/json; charset=utf-8",
success: function (data) {
alert("Success");
},
error: function (statusText, error) {
alert("Error");
}
});
Here is API code
[EnableCors("*","*","*")]
public class MVCController : Controller
{
// POST: MVC/Create
[HttpPost]
public ActionResult Create(MyData value)
{
//My Code
}
}
I am getting response The response had HTTP status code 404.
Why Ajax call is failing when I use contentType to application/json?

Answer 1

Had similar issues and i fixed it by adding some configurations in the system.webserver in web.config or you can write it as a custom filter attribute and then register it in filterconfig.cs in App_start folder.
<system.webserver>
<httpProtocol>
<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, POST, PUT,DELETE,OPTIONS"/>
</customHeaders>
</httpProtocol>
</system.webserver>
<--this is for the web,config-->
or for the filterconfig.cs you can write a custom filter and override the ActionFilterAttribute but note that the challenge with this is that any action such as /token to generate an authorization token might fail because it does not satisfy the onActionExecuting method, so maybe you might want to go with the web.config
public class CustomHeaderAttributeFilter : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
//add in your custom headers
filterContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
filterContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type");
filterContext.HttpContext.Response.AddHeader("Access-Control-Allow-Methods", "GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS");
base.OnActionExecuting(filterContext);
}
public void OnException(ExceptionContext filterContext)
{
//do some cool exception handling here
}
}
}