ASPNetBoilerplate enable CORS

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