Problem with posting data to Web API

Question

Hi All,

 

I have a web api which has a Post method in it.

So from another webpage i'm posting json data to this API using jquery ajax as below - 

$.ajax({
    type: "POST",
    url: "http://localhost:4046/Values/Mymethods",
    data: jsondata,
    dataType: 'json'
}).complete(function (msg) {
});

This is working fine and getting the result from API. 

 

The issue happens when I add an custom header in to this as below - 

$.ajax({
             type: "POST",
             url: "http://localhost:4046/Values/Mymethods",
             data: jsondata,
             dataType: 'json',
             header: { 'Token': 'asasaad' }
         }).complete(function (msg) {
         });

 Now this is throwing cross domain error like below -

 

XMLHttpRequest cannot load http://localhost:4046/Values/My methods. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:2769' is therefore not allowed access. The response had HTTP status code 405. 

 

I have provided <add name="Access-Control-Allow-Origin" value="*" /> header in web.config

 

I have created Web API in MVC 4.

 

Hope someone has got an solution for this.

 

Thanks in advance. 

 

 

 

Answer 1

Hi Midhun T P

 

 solution 1:(it's not header)Change header to headers 

 

$.ajax({

type: "POST",

url: "http://localhost:4046/Values/Mymethods",

data: jsondata,

dataType: 'json',

headers: { 'Token': 'asasaad' }

}).complete(function (msg) {

});

 

solution 2:

Enable cross domain 

$.ajax({

type: "POST",

url: "http://localhost:4046/Values/Mymethods",

data: jsondata,

dataType:'jsonp',

crossDomain:true,

headers: { 'Token': 'asasaad' }

}).complete(function (msg) {

});

 

solution 3:

set json data as array not as object -->web-api(global.asax.cs)

protected void Application_Start()

{

GlobalConfiguration.Configure(WebApiConfig.Register);

log4net.Config.XmlConfigurator.Configure(new FileInfo(Server.MapPath("~/Log4Net.config")));

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings

.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings

.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Arrays;

GlobalConfiguration.Configuration.Formatters

.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);

}

 

solution 4:

https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api 

 

if help you out, mark as answer 

 

 

 

Answer 2

Hi Gnanavel Sekar,

 

Thanks for the help bro.

 

Unfortunately, the first two solutions didn't worked for me.

 

3rd one is not feasible, as it is much difficult to change the json data from object to array as this is already implemented in many projects.

 

For 4th solution, I think it has to be Web API 2. 

 

Anyways I really appreciate your help.

 

I just got the solution from below article -

 

http://www.c-sharpcorner.com/UploadFile/jagdev1234/cross-domain-Asp-Net-web-api-post-data-using-jquery-ajax/ 

 

Answer 3

Welcome and Thank you Midhun T P