如何解决Azure Web应用程序服务-Angular App调用login.microsoft.com CORS问题
我目前在理解如何在托管于Azure上的角度应用程序中允许跨源调用时遇到麻烦。
我打电话给 https://login.microsoftonline.com/application_id/oauth2/v2.0/token获取令牌以对Microsoft图形进行进一步的api调用。
当前，我使用的Chrome扩展名为“允许CORS：Access-Control-Allow-origin”，当此插件处于活动状态时，我的网站可以正常运行。当然，这远非令人满意。如果我不需要此扩展名，我会更愿意
在本地托管的环境中，我创建了一个代理配置，并将其添加到我的angular.json文件中的启动选项中，并且它的工作原理就是不带扩展名。
现在我将角度应用程序部署到我的应用程序服务的方法是，首先使用“ ng build”构建它，然后再使用visual studio代码扩展“ azure应用程序服务”将其轻松部署到我的应用程序服务
我的理解是，没有办法将代理配置添加到我的版本中，我应该能够配置代理或在我的azure应用程序服务中执行类似的操作。
这是一些屏幕截图。
应用注册：
错误消息
我想强调一点，我正在调用外部API（即login.microsoftonline.com） 因此，我无法在我的应用程序服务中将其添加到CORS部分。因为这似乎是我为大多数存在相同问题的人找到的解决方案
任何帮助将不胜感激
解决方法
更新：我已经找到一种使其工作的方法。
在您的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>
这将为您的角度应用程序创建一个代理，就像在本地托管的角度应用程序中的代理配置文件一样。
,我认为该博客对您有用。
Fixing CORS Issues in Your Front-End Angular 7/8 App with Angular CLI Proxy Configuration
如何解决CORS问题？ 现在我们已经了解了为什么在开发Angular应用程序时可能会发生CORS问题。该如何解决？
有两种方法：
- 配置服务器以发送适当的CORS标头
- 配置Angular CLI代理
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。