Angular 5 missing Content-type in request headers when send to ASP.NET Web API

Question

Currently, I'm using Angular 5 to build a website. My website using 0Auth 2.0 to secure a request send to ASP.net Web API 2.0. So, when i try sending a request to get an access token. I use this function :

userAuthentication(userName, password) {
let data = "username=" + userName + "&password=" + password + "&grant_type=password&client_id=JCWebApp";
return this.http.post(this.rootUrl + '/login', data,{headers:'Content-Type':'application/x-www-form-urlencoded'}});

}

But web api server return for me response with status code 400. When I check an request header of login request, it like this :

Accept
text/html,application/xhtml+xm…plication/xml;q=0.9, / ;q=0.8 Accept-Encoding gzip, deflate Accept-Language en-US,en;q=0.5 Access-Control-Request-Headers
no-auth Access-Control-Request-Method
POST Connection
keep-alive Host
localhost:9810 Origin
http://localhost:4200 User-Agent
Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/59.0

I researched on the internet, and try many way, all most the answer same as : - Angular HttpClient doesn't send header . But it not working with my situation.

So please help me explain why and how to resolve this case.

Thanks.

Answer 1

you need to enable the CORS in your Web API

download this in nuget Microsoft.Owin.Cors

and in ConfigureAuth(IAppBuilder app) located in your Web API

add this line of code app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);