I'm trying to make a sign-in (Angular2 - client and web API 2 - on a server).
I'm receiving a
OPTIONS http://localhost:48604/Token 400 (Bad Request)
followed by
Failed to load http://localhost:48604/Token: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 400.
while other requests don't fail due to CORS issue because I've got CORS enabled globally in WebApiConfig.cs:
Web API:
public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Configure Web API to use only bearer token authentication. config.SuppressDefaultHostAuthentication(); config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); EnableCorsAttribute cors = new EnableCorsAttribute("http://localhost:4200", "*", "*"); config.EnableCors(cors); // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } } My Startup.Auth.cs :
public partial class Startup { public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; } public static string PublicClientId { get; private set; } // For more information on configuring authentication, please visit https://go.microsoft.com/fwlink/?LinkId=301864 public void ConfigureAuth(IAppBuilder app) { app.CreatePerOwinContext(ApplicationDbContext.Create); app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create); app.CreatePerOwinContext<ApplicationRoleManager>(ApplicationRoleManager.Create); app.UseCookieAuthentication(new CookieAuthenticationOptions()); app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie); // Configure the application for OAuth based flow PublicClientId = "self"; OAuthOptions = new OAuthAuthorizationServerOptions { TokenEndpointPath = new PathString("/Token"), Provider = new ApplicationOAuthProvider(PublicClientId), AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"), AccessTokenExpireTimeSpan = TimeSpan.FromDays(14), AllowInsecureHttp = true }; // Enable the application to use bearer tokens to authenticate users app.UseOAuthBearerTokens(OAuthOptions); // ... Code for third-part logins omitted for brevity ... } } My angular service:
export class AuthService { rootUrl = 'http://localhost:48604'; httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' }) }; constructor(private httpClient: HttpClient) { } logIn(loginData): Observable<any> { const data = 'grant_type=password&username=' + loginData.username + '&password=' + loginData.password; return this.httpClient.post(this.rootUrl + '/Token', data, this.httpOptions); } } And as far as I understand after /Token the request should be redirected to api/Account/ExternalLogin but never gets to this controller method.
Then I found an post where they say you need to override MatchEndpoint method in ApplicationOAuthProvider class and I did it:
public override Task MatchEndpoint(OAuthMatchEndpointContext context) { if (context.IsTokenEndpoint && context.Request.Method == "OPTIONS") { context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "http://localhost:4200" }); context.OwinContext.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "authorization"}); context.RequestCompleted(); return Task.FromResult(0); } return base.MatchEndpoint(context); } in my sign-in component:
this.authService.logIn(loginData).subscribe( (data) => { console.log(data); //sessionStorage.setItem('tokenKey', token); //console.log('sessionStorage.getItem: ' + sessionStorage.getItem('tokenKey')); }, ); now I the response to POST request is 200 OK but still console says:
Failed to load http://localhost:48604/Token: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
then I add another if for a POST method where I also add needed headers:
public override Task MatchEndpoint(OAuthMatchEndpointContext context) { if (context.IsTokenEndpoint && context.Request.Method == "OPTIONS") { context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] {"http://localhost:4200"}); context.OwinContext.Response.Headers.Add("Access-Control-Allow-Headers", new[] {"authorization"}); context.RequestCompleted(); return Task.FromResult(0); } if (context.IsTokenEndpoint && context.Request.Method == "POST") { context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "http://localhost:4200" }); context.OwinContext.Response.Headers.Add("Access-Control-Allow-Headers", new[] { "authorization", "Content-Type" }); context.RequestCompleted(); return Task.FromResult(0); } return base.MatchEndpoint(context); } Now the POST method will add headers to response but I get null instead of token.
