AngularJS SPA 访问在 Azure AD 上保护的 CORS WebAPI

Posted 2023-03-04

【中文标题】AngularJS SPA 访问在 Azure AD 上保护的 CORS WebAPI

【英文标题】：AngularJS SPA access CORS WebAPI secured on Azure AD

【发布时间】：2015-04-01 17:04:57

【问题描述】：

我遵循了 SinglePageApp-DotNet 示例，它运行良好。

然后我想让单页应用程序调用一个启用 CORS 的 web api。这两个应用程序都由 AAD 保护并部署到 Azure 网站，我无法让它工作。我按照https://github.com/omercs/corsapisample 和https://github.com/matvelloso/AngularJSCORS 的示例对每个单词进行了操作，但出现“此请求的授权已被拒绝”错误。

当我禁用控制器操作的 [Authorize] 属性时，它起作用了。所以我认为CORS设置是正确的。从日志中我可以看到 CORS 预检（OPTION 调用）成功。

知道如何解决这个问题吗？非常感谢您的帮助。

【参考方案1】：

如果您从 CORS api 端点看到 401 响应代码，则表示您的服务不接受令牌。您需要匹配令牌中的受众和 cors api 项目配置中的受众。

在 Azure AD 项目 1 中注册 CORS API 项目 找到应用密钥 ida:Tenant 并将值替换为您的 AAD 租户名称 找到应用密钥 ida:Audience 并将值替换为您从 Azure 门户复制的应用 ID URI。 在示例中启用 cors 在 Azure AD 项目 2 中注册单页应用程序 授予 project1 权限 在“其他应用程序的权限”部分，单击“添加应用程序”。在“显示”下拉菜单中选择“其他”，然后单击上方的复选标记。找到并单击 To Go API，然后单击底部的复选标记以添加应用程序。从“Delegated Permissions”下拉菜单中选择“Access To Go API”，然后保存配置。

启用 Oauth2 隐式：

默认情况下，Azure AD 中预配的应用程序未启用使用 OAuth2 隐式授权。使用 Azure AD 部分中应用配置中的“管理清单”按钮，下载应用程序的清单文件并将其保存到磁盘。使用文本编辑器打开清单文件。搜索 oauth2AllowImplicitFlow 属性。你会发现它被设置为false；将其更改为 true 并保存文件。使用 Manage Manifest 按钮，上传更新的清单文件。保存应用的配置。

如果有任何问题，您可以使用 Fiddler 获取令牌并检查它们。如果权限设置正确，CORS API 端点将接受令牌。

【参考方案2】：

仅供参考。我们现在有一个官方示例，演示了如何将 CORS 与 ADAL JS 和 Angular 一起使用。你可以在https://github.com/AzureADSamples/SinglePageApp-WebAPI-AngularJS-DotNet找到代码和详细说明

【讨论】：

这很令人困惑，因为 SPA 本身与调用另一个 web api 项目的 web api 项目混合在一起。是否有调用 Web Api 项目的纯 SPA（角度）示例？我正在尝试设置它，但在使用 adal 的承载令牌调用时总是在 api 上得到 401。