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

Posted 2023-03-04

【中文标题】Access-Control-Allow-Origin header not found 错误，当在 ASP.NET Web api 身份中启用 cors 时

【英文标题】：Access-Control-Allow-Origin header not found error, when cors is enabled in ASP.NET web api identity

【发布时间】：2018-12-10 09:09:06

【问题描述】：

我正在使用 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.

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

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

如果我在浏览器上请求此链接，它可以正常工作，但不是来自角度调用。 Web API 信息

我的 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 原始链接 http://localhost:4200

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

【问题讨论】：

可以从 Post Man 调用 API 吗？

我认为您应该关注错误消息：... has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *, *', but only one is allowed. Origin 'http://localhost:4200' is therefore not allowed access.。在浏览器上，它通常会在调用实际请求之前调用 Pre-flight 请求（OPTION 请求）。

这更像是一个关于IIS配置的问题，帮不上忙，抱歉。

让我们continue this discussion in chat。

【参考方案1】：

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

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