从角度访问webapi时出现401未经授权的错误

Posted

技术标签:

【中文标题】从角度访问webapi时出现401未经授权的错误【英文标题】:401 Unauthorized error when accessing webapi from angular 【发布时间】:2016-08-26 16:21:37 【问题描述】:

当用户访问我的 webapi 应用程序时,我需要捕获用户的域\用户名。在我的开发机器上,我的 webapi 位于 localhost:10570 和我的 angularjs 网站,它在 localhost:34575 调用 web 服务。

如果我直接调用我的 webapi 应用程序,一切正常。我可以看到用户域和用户名,服务将请求的数据作为 JSON 返回。但是,如果我访问我的 angularjs 站点并且 angular 调用了 webapi,那么每次针对该服务的调用都会得到 401 未授权。

在我的 WebApi 应用程序的 web.config 中,我有:

<system.web>
    <compilation debug="true" targetFramework="4.5.2" />
    <httpRuntime targetFramework="4.5.2" />
    <authentication mode="Windows" />
  </system.web>
  <system.webServer>
    <httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:34575" />
    <add name="Access-Control-Allow-Methods" value="POST, PUT, DELETE, GET, OPTIONS" />
    <add name="Access-Control-Allow-Headers" value="content-Type, accept, origin, X-Requested-With, Authorization, name" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</system.webServer>

我在 IIS Express for Visual Studio 2015 的 applicationhost.config 文件中有这个:

<location path="MyNamespace.WebAPI">
    <system.webServer>
        <security>
            <authentication>
                <windowsAuthentication enabled="true" />
                <anonymousAuthentication enabled="false" />
            </authentication>
        </security>
    </system.webServer>
</location>

我的 angularjs 网站属于“MyNamespace.Client”的同一解决方案。

为什么直接访问web服务正常,但是通过angular应用访问却失败了?

【问题讨论】:

您需要使用 Bearer Token。请参阅bitoftech.net/2014/06/09/…、dotnetcurry.com/aspnet/1223/… 和 c-sharpcorner.com/UploadFile/ff2f08/… @gpaoli 幸运的是,在这种情况下不需要承载令牌。看起来工作量很大。 【参考方案1】:

我没有意识到您必须告诉 Angular 将您的凭据发送到服务器。我只需要更改我的 API 调用:

$http.get(url);

$http.get(url,  withCredentials: true );

【讨论】:

hmm 这给了我一个不同的错误:当凭证标志为真时,不能在“Access-Control-Allow-Origin”标头中使用通配符“*”。但是当我删除它时,我得到:请求的资源上没有“Access-Control-Allow-Origin”标头。 @SonicSoul 这看起来像一个 CORS 错误。如果您的 Angular 应用程序由 Web 服务支持,并且它们位于不同的域或具有不同端口的同一域中,则您必须使用 CORS。也许它没有正确配置?如果这是 .NET,则设置将在您的 web.config 中。 是的,有问题的通配符在 web.config 中。我已经到了可以让所有工作都可以工作但不是看跌期权的地步.. @SonicSoul 你在用 Chrome 吗? Chrome 的 CORS 和托管在 localhost 上的网站存在问题。因此,如果您的 Web 服务位于 localhost:1234 并且您的 Angular 站点位于 localhost:9876,那么除 GET 之外的任何请求都会有问题。在 IE 中尝试,看看会发生什么。 @SonicSoul 如果问题来自网络服务,通常您会看到有关预检选项的错误。我发现我必须为我的每个控制器添加一个名为 GetOptions 的公共函数。我给了它[HttpOptions] 属性,它只有一行:return Ok();

以上是关于从角度访问webapi时出现401未经授权的错误的主要内容,如果未能解决你的问题,请参考以下文章

尝试使用帐户服务从 Gmail 帐户读取 Gsuite 中的公司电子邮件时出现 401 未经授权的错误

使用 Axios 和 Firebase 时出现 401 未经授权的错误

向 web api 发送 ajax 请求时出现 401 Unauthorized

尝试访问 REST API 时出现 401(未授权)

在 grails 应用程序中调用 spring security rest 插件登录时出现 401 未经授权的错误

使用 Coldfusion/Railo 向 Mailchimp API v3.0 发送 PUT 请求时出现 401 未经授权的错误