当在 ASP.NET web api 身份中启用 cors 时，Access-Control-Allow-Origin header not found 错误

Question

我正在使用 Angular 6 @ localhost:4200 & Asp.net Web Api 身份 - 个人用户帐户 @ localhost:57310

现在，我在 webapiconfig.cs 文件中启用了这样的 cors :-

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

它工作正常，但是，现在当我需要在我的网站上添加 google+ 登录验证时，它又开始显示这个错误。

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

所以，为了解决这个问题，我在 web.config 文件的 <system.webServer> 中添加了以下代码。

<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>

新错误是 =>

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

如果我在任何一个上面提供的 cors 启用技术中将 "*" 替换为 http://localhost:4200。错误会相应变化，例如 =>

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.

或

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.

如果我删除其中任何一个，错误将恢复为 =>

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

Angular信息

我的Angular代码是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));

如果我在浏览器上请求此 link，它工作正常，但不是来自 angular 调用。 Web API 信息

My WebAPI AppilicationOAuthProvider.cs 重定向文件的方法是：=>

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 开发者账号信息

我的授权JavaScript来源Link http://localhost:4200

我的授权重定向 URI http://localhost:57310/signin-google

Answer 1

代码中的唯一问题在 Angular 信息部分。在 google 身份验证时，我发出了一个获取请求，但这是错误的。正确的方法是=>

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";

而不是

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));

当在 ASP.NET web api 身份中启用 cors 时，Access-Control-Allow-Origin header not found 错误

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

cors

asp.net-web-api

google-api-dotnet-client

owin-middleware

angular