angularjs - 从 Angular 访问 web api 时出现 401 未经授权的错误

Question

当他们访问我的 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 应用程序访问它却失败了？

Answer 1

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

$http.get(url);

到

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