ASPNetBoilerplate enable CORS - asp.net-mvc

Question

In interface of IApplicationService I have decorated one of my method as [HttpOptions]
When I do ajax from another domain, the method will be fired from the server side but I have got the below exception in Client-Side:
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
As This link described how to enable CORS in MVC core or WebApi in ASPNetBoilerplate but I have neither app.UseCors("AllowAll") nor services.AddMvc(); in ASP.Net MVC with ABP.
I am using https://aspnetboilerplate.com/.
Is there a way to enable it in ABP ?
Sample:
abp.services.fep.user.ping().done(function (data) {
console.log(data);
});
but the result:
General
Request URL:http://xxxx/wado1/api/services/fep/user/Ping
Request Method:OPTIONS
Status Code:200 OK
Remote Address:192.168.16.201:80
Referrer Policy:no-referrer-when-downgrade
Response Headers:
Access-Control-Allow-Origin:*
Cache-Control:private
Content-Length:129
Content-Type:application/json; charset=utf-8
Date:Mon, 12 Feb 2018 10:06:41 GMT
Server:Microsoft-IIS/10.0
Set-Cookie:Abp.Localization.CultureName=en-US; expires=Tue, 12-Feb-2019
10:06:33 GMT; path=/WADO1
Set-Cookie:.ASPXANONYMOUS=jE6RBHsyANH3AuPkKFlnusuKGyqfdikCJ5cJSo38xg-
pCqe8JnUOX3t0o2V6s0_aT3N0PLnw2XG9PRzCPIse3uLC60vS8l-
3H8Z_UP1lqCIyDunM9oxhxqKJOca1B4Nv5eQwaQ2; expires=Sun, 22-Apr-2018 20:46:33
GMT; path=/; HttpOnly
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-StackifyID:V1|80000cf1-0001-f700-b63f-84710c7967bb|
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.9
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:xxxx
Origin:http://localhost
Pragma:no-cache
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/64.0.3282.140 Safari/537.36
When I create a new template from https://aspnetboilerplate.com with ASP.Net Core frame work I can see something like below in Startup file:
// Configure CORS for angular2 UI
services.AddCors(
options => options.AddPolicy(
_defaultCorsPolicyName,
builder => builder
.WithOrigins(
// App:CorsOrigins in appsettings.json can contain more than one address separated by comma.
_appConfiguration["App:CorsOrigins"]
.Split(",", StringSplitOptions.RemoveEmptyEntries)
.Select(o => o.RemovePostFix("/"))
.ToArray()
)
.AllowAnyHeader()
.AllowAnyMethod()
)
);
UPDATE1:
I add the below webapi config to enable CORS:
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
config.EnableCors();
}
}
and register it :
public override void Initialize()
{
WebApiConfig.Register(GlobalConfiguration.Configuration);
}
but in client-side I got Error 500, after enabling Failed Request Tracing, I see the log trace and buffer error like:
{"message":"An error has occurred.","exceptionMessage":"There is an action Ping defined for api controller fep/user but with a different HTTP Verb. Request verb is POST. It should be Options","exceptionType":"Abp.AbpException","stackTrace":" at Abp.WebApi.Controllers.Dynamic.Selectors.AbpApiControllerActionSelector.GetActionDescriptorByActionName(HttpControllerContext controllerContext, DynamicApiControllerInfo controllerInfo, String actionName)\r\n at Abp.WebApi.Controllers.Dynamic.Selectors.AbpApiControllerActionSelector.SelectAction(HttpControllerContext controllerContext)\r\n at System.Web.Http.Cors.AttributeBasedPolicyProviderFactory.SelectAction(HttpRequestMessage request, IHttpRouteData routeData, HttpConfiguration config)\r\n at System.Web.Http.Cors.AttributeBasedPolicyProviderFactory.GetCorsPolicyProvider(HttpRequestMessage request)\r\n at System.Web.Http.Cors.CorsMessageHandler.d__10.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)\r\n at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n at System.Web.Http.Cors.CorsMessageHandler.d__b.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)\r\n at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n at System.Web.Http.Cors.CorsMessageHandler.d__0.MoveNext()"}
UPDATE2:
I enabled CORS by :
var cors = new EnableCorsAttribute(
origins: "*",
headers: "*",
methods: "*");
config.EnableCors(cors);
and register it in application_start but by this ajax with contentType:application/x-www-form-urlencoded" as #AlperEbicoglu posted in his answer method get fired in Back-End but entered DTO be null because it is JSON...
Abp set contentType to application/json automatically in abp.jquery.js file, for this reason(application/json) when I want run below code:
abp.services.fep.user.authenticate(box_in).done(function (data) {
console.log(data);
});
I got that mentioned exception in UPDATE1 section.
Why it can be called with application/x-www-form-urlencoded but with application/json exception raised (I see this in XML Tacer file in IIS).
I think 1 step remained two resolve this, any help would be truly appreciated.
Thanks in advance.

Answer 1

updated my answer....
You already succeeded in enabling CORS. Now you have a problem with preflight requests. I think you need to decorate your method as POST verb. Browser automatically sends preflight request if it needs.
and if you insist on making it OPTIONS. so you need to execute it with custom ajax like you can use JQuery ajax.
something like this:
$.ajax({
url: .....,
type: 'OPTIONS',
contentType: "application/x-www-form-urlencoded",
data: .......,
success: function (data, status) {
console.log("Success!!");
console.log(data);
console.log(status);
},
error: function (xhr, desc, err) {
console.log(xhr);
console.log("Desc: " + desc + "\nErr:" + err);
}
});
pls read this: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 2

Last time i had a similar requirement with abp i have addressed it with custom attribute instead of enablecors method like below:
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
public override void OnActionExecuted(HttpActionExecutedContext filterContext)
{
if (filterContext.Response != null)
if (filterContext.Response.Headers != null)
filterContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
base.OnActionExecuted(filterContext);
}
}
and then in WebApiModule:
Configuration.Modules.AbpWebApi().DynamicApiControllerBuilder
.ForAll<IApplicationService>(typeof(WebsiteApplicationModule).Assembly, "api")
.WithConventionalVerbs()
.WithFilters(new AllowCrossSiteJsonAttribute())
.Build();
if you still getting error regarding Access-Control-Allow-Headers try to add it also in response headers
based on this thread: Setting Access-Control-Allow-Origin in ASP.Net MVC - simplest possible method