两个 Web 应用之间的 Azure 身份验证

Question

我在 Azure 中设置了两个 Web 应用程序，它们都由 Azure AD 身份验证提供支持。 一是前端，二是API后端。自己打开每个页面效果很好（登录屏幕），但前端对后端的调用会导致被 CORS 策略阻止。消息是：

XMLHttpRequest 无法加载 hxxps://backend.azurewebsites.com/api。从 hxxps://backend.azurewebsites.com/api 重定向到 hxxps://login.windows.net/94... 已被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头出现在请求的资源。因此，不允许访问 Origin 'hxxps://frontend.azurewebsites.net'。

调用如下：

$.ajax({
            type: type,
            dataType: 'json',
            url: server + '/' + url,
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            data: data
            }
        });

Answer 1

当调用未经身份验证时，API 不应发回重定向。调用者对此无能为力。

相反，您应该在 API 上设置 Azure AD Bearer 令牌身份验证，将 Audience 设置为 API 客户端 ID，并将 Tenant 设置为您的 Azure AD 租户 ID/域名。

然后您的前端应该以某种方式获取 API 的访问令牌，并将其附加到所有去往它的调用。有多种方法可以做到这一点。

您可以在此处找到示例单页应用程序：https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp。

更多示例应用在这里：https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-code-samples