Enable CORS on Web API project

Enable CORS on Web API project 



Error:

 


Access to XMLHttpRequest at 'http://local-corsapi.com/api/demo' from origin 'http://local-corsweb.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 To resolve, above issue we need to implement and enable CORS in api project.

Enable CORS

In webapi project, install below package using nuget, 

install-Package Microsoft.AspNet.WebApi.Cors

Different Scopes to EnableCors


1. Action

2. Controller

3. Global





1. Action - We can enable CORS on specific action only, for example as below





 [EnableCors(origins: "http://local-corsweb.com", headers: "*", methods: "*")]
        public HttpResponseMessage Post()
        {
            return new HttpResponseMessage()
            {
                Content = new StringContent("POST Response : " + DateTime.Now)
            };
        }

 public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            //Write below code line
             config.EnableCors();

            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }

2. Controller - We can enable CORS on controller basis as well, so it will aplicable for all action methods in that controller.

[EnableCors(origins: "http://local-corsweb.com", headers: "*", methods: "*")]
public class DemoController : ApiController
{
 public HttpResponseMessage Get()
 {
  return new HttpResponseMessage()
  {
   Content = new StringContent("GET Response : " + DateTime.Now)
  };
 }

 [DisableCors]
 public HttpResponseMessage Post()
 {
  return new HttpResponseMessage()
  {
   Content = new StringContent("POST Response : " + DateTime.Now)
  };
 }

 public HttpResponseMessage Put()
 {
  return new HttpResponseMessage()
  {
   Content = new StringContent("PUT: Test message")
  };
 }
}

But if you don't want to implement for specific action method then you can decorate that action method using [DisableCors]


3. Globally : To enable CORS on application level, we can write below code in WebApiConfig file

public static void Register(HttpConfiguration config)
{
 //Below two lines set CORS globally 
 var cors = new EnableCorsAttribute("http://local-corsweb.com", "*", "*");
 config.EnableCors(cors);
  
  
 config.MapHttpAttributeRoutes();

 config.Routes.MapHttpRoute(
  name: "DefaultApi",
  routeTemplate: "api/{controller}/{id}",
  defaults: new { id = RouteParameter.Optional }
 );
}


MVC Application or client side application

HTML

<style>
    .rowheight {
        padding: 10px;
    }
</style>


<div class="row">
    <div class="col-md-12 rowheight">
        <input type="button" value="Get Method" onclick="GetRequest()" class="btn btn-default" />
        <span id='getResult'></span>        
    </div>
 
    <div class="col-md-12 rowheight">
        <div>
            <input type="button" value="Post Method" onclick="PostRequest()" class="btn btn-default" />
            <span id='postResult'></span>
        </div>
    </div>
</div>

Java Script

<script>
    
    var serviceUrl = 'http://local-corsapi.com/api/demo';

    function GetRequest() {
       $('#getResult').text("");
            $.ajax({ 
                headers: { 
                    'Accept': 'application/json',
                    'Content-Type': 'application/json' ,
                    "cache-control": "no-cache"
                },
                url: serviceUrl,
                type: 'POST',    
               // data:  ApiRequest ,
                data:  JSON.stringify( {
                    "PageSize": 10,
                    "PageNumber": 0,
                    "Search": ""
                }),
                 
                success: function (data) {
    $('#getResult').text("");
                   $.each(data, function (i, data) {
                    $("#getResult").append( data.categoryName+ '  '  );
                });
                    
                },
                error: function (request, status, error) {
                    if (request.responseText == null) {
                        $('#getResult').text(error.text);
                    }
                    else {
                        $('#getResult').text(request.responseText);
                    }
                }
            });
    }

    function PostRequest() {
        $.ajax({
            type: "post",
            url: serviceUrl,
            success: function (data) {               
                $('#postResult').text(data);
            },
            error: function (request, status, error) {
                if (request.responseText == null) {
                    alert("There is something wrong");
                }
                else {
                    alert(request.responseText);
                } 
            }
        });
    }

</script>

Another way:

Web.config in API project, add below setting in <system.webServer>
<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
in global.asax of webAPI project
protected void Application_BeginRequest(Object sender, EventArgs e)
{
 // Preflight request comes with HttpMethod OPTIONS
 if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
 {
  HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
  HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
  // The following line solves the error message
  HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
  // If any http headers are shown in preflight error in browser console add them below
  HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Pragma, Cache-Control, Authorization ");
  HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
  HttpContext.Current.Response.End();
 }
}
API controller method, use IHttpActionResult
public class UsersController : ApiController
{
 public IHttpActionResult Get()
 {
  return Ok("done dona done ");
 }
}
API web.config sample
<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  https://go.microsoft.com/fwlink/?LinkId=301879
  -->
<configuration>
  <configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
  </configSections>
  <appSettings></appSettings>
  <connectionStrings>
    <add name="DbConnectionString" connectionString="Data Source=localhost;Initial Catalog=databasename;User ID=sa; Password=password" providerName="System.Data.SqlClient" />
  </connectionStrings>
  <system.web>
    <compilation debug="true" targetFramework="4.6" />
    <httpRuntime targetFramework="4.6" />
    <customErrors mode="Off"></customErrors>
  </system.web>

  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
        <bindingRedirect oldVersion="0.0.0.0-11.0.0.0" newVersion="11.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Http" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-5.2.7.0" newVersion="5.2.7.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Autofac" publicKeyToken="17863af14b0044da" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-4.8.1.0" newVersion="4.8.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Net.Http.Formatting" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-5.2.7.0" newVersion="5.2.7.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-5.1.0.0" newVersion="5.1.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Ninject" publicKeyToken="c7192dc5380945e7" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-3.3.4.0" newVersion="3.3.4.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Ninject.Web.Common" publicKeyToken="c7192dc5380945e7" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-3.3.1.0" newVersion="3.3.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Http.WebHost" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-5.2.4.0" newVersion="5.2.4.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Owin" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-4.0.1.0" newVersion="4.0.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Owin.Security.OAuth" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-4.0.1.0" newVersion="4.0.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Owin.Security" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-4.0.1.0" newVersion="4.0.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Owin.Security.Cookies" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-4.0.1.0" newVersion="4.0.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Cors" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-5.2.7.0" newVersion="5.2.7.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <system.codedom>
    <compilers>
      <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701" />
      <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" />
    </compilers>
  </system.codedom>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="mssqllocaldb" />
      </parameters>
    </defaultConnectionFactory>
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
    </providers>
  </entityFramework>
  <system.webServer>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>
</configuration>


Another way:

you can install IIS CORS Module using below link and then enable the CORS in web.config

Install CORS on server and update web.cofig of API project

<system.webServer> 
    ....
<cors enabled="true" failUnlistedOrigins="true">
         <add origin="http://yourfrontenddomain.com"
                 allowCredentials="true"
                 maxAge="120">                  

            </add> <!-- this is for specific domain only -->
        <add origin="http://*" allowed="true" />  <!-- this is for all domain -->

     </cors>
  </system.webServer>


Hope this will help you and save your time.

Enjoy !!!

:)
at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)