Friday 8 April 2016

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:12081http://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...