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.