Allow Cross-Origin Requests in Web API

Let’s see how to allow web API to be called from JQuery. 

Browser prevents a web page from making AJAX requests to another domain. This is called the same-origin policy, and prevents a malicious site from reading sensitive data from another site.

But What will do if you create a web API to be called by other websites. You have to allow then to call your API.  Cross Origin Resource Sharing (CORS) allows a server to come over this policy. You can allow specific origins to access your web API.  

Let’s understand with an example.

Let’s create a Web API first :  I am not going to spoon feed you to create web API. I hope you know how to create web API application. Great.. 

Let’s take a APIController :

      using System.Web.Http.Cors;

[EnableCors(origins: "http://localhost:12081", headers: "*", methods: "*")]

public class ValuesController : ApiController

      {        

         public IEnumerable<string> Get()

         {

            return new string[] { "value1", "value2" };

         }       

 }

Ooops, what is EnableCors ?

You have to install a nuget package to get this. Write below command in package manager console :

Install-Package Microsoft.AspNet.WebApi.Cors

 Next step to register CORS from global.asax :

         public static void Register(HttpConfiguration config)

        {

            config.EnableCors();                    

            config.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "api/{controller}/{id}",

                defaults: new { id = RouteParameter.Optional }

            );

        }

Yeah, Your web API is ready to be accessed from origin ‘http://localhost:12081’.

Do I have any option to allow multiple origin ?  

  

Of course Yes.    You can set number of origin by comma separated value like ‘http://localhost:12081, http://www.heros.com, http://www.xyss.com’. Or you can allow all origin by putting ‘*’

[EnableCors(origins: "*", headers: "*", methods: "*")]

Note : Don’t include forward slash at the end of url. E.g ‘http://localhost:12081/’

Now call API from JQuery :

 jQuery.ajax({

            type: "GET",

            url: 'http://192.168.1.118:85/api/values',                        

            success: function (data) {

                alert(JSON.stringify(data));

            },

            error: function (XMLHttpRequest, textStatus, errorThrown) {

                alert("error");

            }

        });

Hooray!! it’s working...