CORS Error while sending POST API from Angular to .Net

I'm trying to send one POST API from angular to my dot net framework api code but it is giving me CORS error. I've identified two scenarios.

Case 1

When I'm using below angular services then it is giving me below error (screenshot mentioned). I've one POST api and i'm passing the data and same accepting in .net.

Angular Services


startStopService(data:any,options?:any):Observable<any>{

const headers = new HttpHeaders({

'Content-Type': 'application/json'

});

console.log("data type" , typeof(JSON.stringify(data)))

return this.http.post<any>(this.url+"action",data,{headers});

}



Above is my angular services and below is the screenshots of the error I'm encountering while sending the POST api data.





Case 2

When I'm changing the header content in the angular services I'm not getting the CORS error. However, I'm getting another error that implicates that "Machine Name is invalid". Even though machine name is getting passed from web.config from API and it is having exact value. My hunch is while passing the data from angular to .net api it is getting sent in JSON String. However, the api code is not able to parse it to correct format. Below is the changed angular services and screenshot.


startStopService(data:any,options?:any):Observable<any>{

const headers = new HttpHeaders({



'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'

});

console.log("data type" , typeof(JSON.stringify(data)))

return this.http.post<any>(this.url+"action",JSON.stringify(data),{headers});

}





I've attached my webapi.config.cs file for the reference.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net;
using System.Threading.Tasks;
using System.Threading;
using System.Web.Http;
using System.Web.Http.Cors;
//using Microsoft.AspNetCore.Cors;

namespace WebApplication1
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services



config.EnableCors(new EnableCorsAttribute("http://localhost:4200", "*", "GET, POST, OPTIONS, PUT, DELETE"));
// Register Preflight Request Handler
config.MessageHandlers.Add(new PreflightRequestsHandler());


// Web API routes
config.MapHttpAttributeRoutes();

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

public class PreflightRequestsHandler : DelegatingHandler
{
protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
{
if (request.Method == HttpMethod.Options)
{
var response = new HttpResponseMessage(HttpStatusCode.OK);
response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:4200");
response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");
return Task.FromResult(response);
}

return base.SendAsync(request, cancellationToken);
}
}
}
}



Web API

<configuration>
<appSettings>
<add key="ServerName" value="Avinash"/>
<add key="services" value="AxInstSV,AppHostSvc"/>
</appSettings></configuration>


In the config I tried with custom headers and giving the value as Access-Control-Allow-Origin ="*" but it also didn't worked.

Note: My api is in .net 4.7.2 framwork and angular is in 17. Microsoft.aspnet.webapi.core -->5.2.7 Microsoft.aspnet.webapi.cors -->5.2.7

In the above webapiconfig.cs file I've tried using * only instead of specified one's and that also didn't worked.

Please let me know if you need any further details and help me out.

Continue reading...