Azure Web 应用服务 - Angular 应用调用 login.microsoft.com CORS 问题

Question

我目前在理解如何在我的 angular 应用程序托管在 Azure 上时允许跨源调用时遇到一些问题。

我打的电话是 https://login.microsoftonline.com/application_id/oauth2/v2.0/token 获取令牌以进一步 api 调用 Microsoft 图表。

目前我使用一个名为“Allow CORS: Access-Control-Allow-origin”的 chrome 扩展，当这个插件处于活动状态时我的网站工作正常。当然，这远非我们所希望的。如果我不需要这个扩展我会更喜欢

在我的本地托管环境中，我创建了一个代理配置，将其添加到我的 angular.json 文件中的启动选项中，它在没有扩展名的情况下也能正常工作。

现在我将 angular 应用程序部署到我的应用程序服务的方式是首先使用 'ng build' 构建它，然后我也使用 visual studio 代码扩展“azure 应用程序服务”轻松将其部署到我的应用程序服务

我的理解是没有办法将代理配置添加到我的构建中，我应该能够配置代理或在我的 Azure 应用程序服务中执行类似的操作。

这里是一些截图。

应用程序注册：

错误信息

我想强调一下，我正在调用外部 api 即 login.microsoftonline.com 所以我无法将它添加到我的应用程序服务中的 CORS 部分。因为这似乎是我为大多数有相同问题的人找到的解决方案

任何帮助将不胜感激

Answer 1

我认为这个博客对你有用。

Fixing CORS Issues in Your Front-End Angular 7/8 App with Angular CLI Proxy Configuration

如何解决 CORS 问题？现在我们已经了解了为什么在开发 Angular 应用程序时可能会出现 CORS 问题。如何修复它们？

有两种方法：

配置服务器以发送适当的 CORS headers
配置Angular CLI 代理

Answer 2

更新：我找到了让它工作的方法。

在你的 Azure 门户中，转到高级工具 > 转到 > 站点扩展 > 图库 > 搜索反向代理并添加它。

然后编辑您的 web.config 文件并添加以下规则

<rule name="Proxy" stopProcessing="true">
       //This is the url your need to call in your http request in angular
      <match url="^login?(.*)" /> 
       //This is the url that actually gets called
      <action type="Rewrite" url="https://login.microsoftonline.com/{R:1}" /> 
</rule>

这将为您的 angular 应用程序创建一个代理，就像代理配置文件在本地托管的 angular 应用程序中所做的那样。

Azure Web 应用服务 - Angular 应用调用 login.microsoft.com CORS 问题

Azure web app service - Angular App making calls to login.microsoft.com CORS Issue

azure

cors

azure-web-app-service

msal

angular