Angular Azure Active Directory B2C 身份验证 - CORS 问题答案

【问题标题】：Angular Azure Active Directory B2C Authentication - CORS issueAngular Azure Active Directory B2C 身份验证 - CORS 问题
【发布时间】：2020-06-08 00:38:49
【问题描述】：

我正在 Angular 中实现 Azure Active Directory B2C 身份验证。我正在使用 msal 拦截器连接 Azure AD B2C。身份验证请求失败并出现错误

通过“https://login.microsoftonline.com/...”访问 XMLHttpRequest 来自原点 'http://localhost/...' 已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。

我根据这篇文章配置了一切：https://medium.com/@sambowenhughes/configuring-your-angular-6-application-to-use-microsoft-b2c-authentication-99a9ff1403b3

【问题讨论】：

我不熟悉你的技术，但是我遇到了 CORS 错误（php + react），它实际上是说你需要有当前的响应头“access-control-allow-origin”正确的值（或通配符）。也许作为一个快速的肮脏修复（显然不是仅用于开发的生产）尝试使用一些 cors 浏览器扩展？
@matri70boss 在这种情况下，错误来自 Azure AD B2C，我们无法控制 CORS 标头。虽然 URL 似乎是正确的格式，但在这种情况下 CORS 被 B2C 阻止似乎有点奇怪：\
@juunas 是的，你的权利。从“用户流”运行“登录”策略时，它重定向到 localhost:4200 并且我正在获取令牌，但是在从角度应用程序运行时，我遇到了 cors 问题。您是否知道如何解决此问题，或者我必须在 Azure AD B2C 租户中进行任何配置更改才能启用来自我的来源的 cors
是 GET 请求还是其他 HTTP 方法？我们只支持 GET 到那个端点。一些库尝试执行 OPTIONS，但失败了。
这是对该端点的 Get 请求。我在 Angular 中使用的库是 MSAL

标签： angular azure-ad-b2c msal azure-authentication

【解决方案1】：

那篇文章大约有两年的历史了，this.clientApplication.authority = "https://login.microsoftonline.com/tfp/" 看起来不对。它应该类似于https://${b2cTenantName}.b2clogin.com/${b2cTenantName}.onmicrosoft.com/B2C_1_Sign_In。

您可以尝试从https://github.com/Azure-Samples/active-directory-b2c-javascript-angular-spa 配置角度示例应用程序并将其用作起点吗？

【讨论】：