如何从 Angular 应用程序调用受保护的 Web api答案

【问题标题】：How do I call a protected web api from a angular application如何从 Angular 应用程序调用受保护的 Web api
【发布时间】：2021-11-12 23:09:27
【问题描述】：

我关注了这个文档：asp.net core web api 和这个doc for the SPA

但是，当尝试从我的 Angular 应用程序（设置了 [authorize] 属性）进行 Web api 调用时，我在控制台日志中收到以下错误消息：

CORS 策略已阻止从源“http://localhost/api/getcustomer”访问 XMLHttpRequest：没有“Access-Control-Allow-Origin”标头请求的资源。

我能够成功登录到 azure AD。但是，我的 api 调用中缺少 Authorization 标头。我在 node/express 中运行 SPA。 asp.net-core 是后端。

我没有为 api 创建单独的应用注册。我确实选择了，但是公开了 api 并创建了一个范围。

401 是状态码：未授权。

【问题讨论】：

【解决方案1】：

此错误表明您必须在后端的 HTTP 响应中添加“Access-Control-Allow-Origin”标头。

对于本地主机，它将是 Access-Control-Allow-Origin=http://localhost:4200。

阅读有关 CORS 的更多信息。

【讨论】：

我编辑了原始帖子以包含 401 返回代码“未授权”看起来这是控制台日志中的第二项。我认为这是因为我的 api 调用中不存在授权标头。 MS 的文档如何说 Angular 和已安装的库会自动添加它。