Access-Control-Allow-Origin header not found error, when cors is enabled in ASP.NET web api identity

Question

I am using Angular 6 @ localhost:4200 & Asp.net Web Api Identity - Individual User Account @ localhost:57310

Now, I enabled cors like this, in my webapiconfig.cs file :-

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

It worked fine, But, now when I need to add google+ login authenticaton in my website, it started showing this error again.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

So, to solve it, I add following code in <system.webServer> in web.config file.

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*"/>
    <add name="Access-Control-Allow-Headers" value="*"/>
    <add name="Access-Control-Allow-Methods" value="*"/>
  </customHeaders>
</httpProtocol>

And new error was =>

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'http://localhost:4200' is therefore not allowed access.

If I replace "*" by http://localhost:4200 in any one the cors enabling techniques provided above. The error changes accordingly, like =>

The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:4200', but only one is allowed. Origin 'http://localhost:4200' is therefore not allowed access.

OR

The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:4200, *', but only one is allowed. Origin 'http://localhost:4200' is therefore not allowed access.

If I remove any one of them, the error revert back to =>

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Angular Information

My Angular code is this.http.get("http://localhost:57310/api/Account/ExternalLogin?provider=Google&response_type=token&client_id=self&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Flogin&state=tTs32zmKbLSJXZP5O46h-GC29j2yrt3TFYYtcG3VY9o1").subscribe(data=>console.log(data));

If I request this link on browser, it works fine, but not from angular call. Web API Information

My WebAPI AppilicationOAuthProvider.cs file method to redirect is:=>

public override Task ValidateClientRedirectUri(OAuthValidateClientRedirectUriContext context)
    {
        //context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });
        if (context.ClientId == _publicClientId)
        {
            Uri expectedRootUri = new Uri("http://localhost:4200/login");


            if (expectedRootUri.AbsoluteUri == context.RedirectUri)
            {
                context.Validated();
            }
        }

        return Task.FromResult<object>(null);
    }

Google Developer Account Information

My Authorized JavaScript Origin Link http://localhost:4200

My Authorized redirect URIs http://localhost:57310/signin-google

Answer 1

Only problem in the code is in Angular Information section. While google authentication, I am issuing a get request but that was wrong. Correct method is =>

window.location.href = "http://localhost:57310/api/Account/ExternalLogin?provider=Google&response_type=token&client_id=self&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Flogin&state=tTs32zmKbLSJXZP5O46h-GC29j2yrt3TFYYtcG3VY9o1";

instead of

this.http.get("http://localhost:57310/api/Account/ExternalLogin?provider=Google&response_type=token&client_id=self&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Flogin&state=tTs32zmKbLSJXZP5O46h-GC29j2yrt3TFYYtcG3VY9o1").subscribe(data=>console.log(data));