How to solve Access-Control-Allow-Origin

When you are trying to do an http post from your Jquery, Angular or any client side script language to an web API that has a different domain name as yours, you will be getting error on the web browser that says:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

This is happening because the website and web API has a different domain names. solving this issue can be done using the following steps:

  1. On the wbe API project, Right click References and select “Manage Nuget”
  2. Search for “Cors” and install “Microsoft.AspNet.WebApi.Cors” , this will install a new dll to your project; System.Web.Http.Cors
  3. go to App_Start/WebApiConfig.cs file
  4. Add using statement  to include System.Web.Http.Cors
  5. On Register method, add the following 2 lines
    var cors = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(cors);

    the EnableCorsAttribute has the following parameters:

Origins:  Comma-separated list of origins that are allowed to access the resource. Use “*” to allow all.
Headers: Comma-separated list of headers that are supported by the resource. Use “*” to allow all. Use null or empty string to allow none.
Methods: Comma-separated list of methods that are supported by the resource. Use “*”  to allow all. Use null or empty string to allow none.