两个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'标题存在于请求的资源。原因'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承载标记身份验证，其中Audience设置为API客户端ID，Tenant设置为您的Azure AD租户标识/域名。

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

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

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