CODEWITHSUNDEEP
angularhttpcorsasp.net-web-api2
Robert Dinaro
Robert Dinaro

Reputation: 538

Angular 4 - HttpClient - Cors - Windows Auth

I have two apps hosted on my local IIS such as http://localhost/abc and http://localhost/xyz.

abc is an Angular 4 app and xyz is my Web API backend api app.

they are both intranet apps. Users will be logging on to http://localhost/abc with Windows Authentication.

I would like to somehow pass user's windows credential to my Web Api backend for various reasons including auditing and logging. As it is a data centric app - It is crucial that I capture user details otherwise it wont work.

I have seen various articles and questions and they all suggest the same thing.

adding withCredentials to the request.

I tried doing that but from Chrome - I dont see withCredentials header getting set whereas in IE at least I can see the header getting set using Fiddler.

I have enabled Cors on web Api and it does work in terms of http://localhost/abc calling http://localhost/xyz but I dont see the credentials getting passed.

In chrome Dev tools and Fiddler I dont see any cookie getting set by the Request which articles/tutorials have suggested.

I get the following error in Chrome

{"Message":"An error has occurred.","ExceptionMessage":"The specified policy origin 'http://localhost/abc' is invalid. It must not contain a path, query, or fragment.","ExceptionType":"System.InvalidOperationException","StackTrace":"   at System.Web.Http.Cors.EnableCorsAttribute.ValidateOrigins(IList`1 origins)\r\n   at System.Web.Http.Cors.EnableCorsAttribute.GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken)\r\n   at System.Web.Http.Cors.CorsMessageHandler.<GetCorsPolicyAsync>d__10.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n   at System.Web.Http.Cors.CorsMessageHandler.<HandleCorsRequestAsync>d__5.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()\r\n   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n   at System.Web.Http.Cors.CorsMessageHandler.<SendAsync>d__0.MoveNext()"}

Web API Cors enable

var cors = new EnableCorsAttribute("http://localhost/abc", "*", "*") { 
SupportsCredentials = true };

config.EnableCors(cors);

Web API turning on windows auth

<authentication mode="Windows" />
<authorization>
  <allow verbs="OPTIONS" users="*"/>
  <deny users="?"/>
</authorization>

Angular Http Call and setting withCredentials

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers, withCredentials: true });
return this.http.post(environment.backendApiUrl + 
    "/api/companies/search",jsonData, options)
    .map((response:Response) => <any[]>response.json())

Note I have also noticed that since making this change; my browser no longer makes the preflight request (OPTIONS) to my server. Which is strange and I believe the two things are somehow connected.

Any ideas guys? Let me know if you need to see some more code snippets.

TIA

Upvotes: 2

Views: 2072

Answers (1)

Michael Kang
Michael Kang

Reputation: 52837

Remove the fragment. CORS cares about domains:

var cors = new EnableCorsAttribute("http://localhost", "*", "*") {

Upvotes: 4

Related Questions