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=\"Web\" /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 !!!
:)
