如何允许 APIM 传递到 Angular App

Posted

技术标签:

【中文标题】如何允许 APIM 传递到 Angular App【英文标题】:How to allow APIM to pass through to Angular App 【发布时间】:2021-01-11 08:08:06 【问题描述】:

我有一个托管在 Azure 中的 API,它被锁定,只能通过称为 Azure API Manager (APIM) 的网关使用。 API 部分通过 APIM 可以正常工作。但在同一个项目中,我有一个 Angular 8 应用程序。

通常我会将静态站点与 API 分开,但我的目标是按照Microsoft's Api/SPA structure 一起运行它们。

问题在于 Azure API 管理做了两件奇怪的事情。

    我想我丢失了 javascript 请求的 MIME 类型。因此,当我的 SPA 加载时,它反过来会请求 .js 文件,这会导致 mime 失败 Strict MIME type checking is enforced for module scripts per html spec API 管理添加自己的路由子路径,即应用名称。就像我的“appName”API 的 APIM URL 是 https://subscription.azure-api.net/appName/。我不知道确切的问题,但这使得对资源(img、css、js)的 HTML 请求以一种或另一种方式关闭。我已经部分成功地手动设置了 http base href,但似乎仍然存在问题。

如果其他人有 APIM 和 Angular 方面的经验,任何文档都将不胜感激。缺乏基本的谷歌搜索。

【问题讨论】:

【参考方案1】:

如果我了解更多信息,我会更新此内容。我来回尝试了一些事情,在某个时候它才开始起作用。我最近所做的独立更改是对All APIs CORS 策略,使其全部变为*,并删除了allowCredentials 标签。

我们会将概念验证的工作复制到官方环境中,我会保持警惕,看看问题是否会再次出现,以及究竟如何解决。

【讨论】:

以上是关于如何允许 APIM 传递到 Angular App的主要内容,如果未能解决你的问题,请参考以下文章

Angular 6 - 通过服务将消息传递到从组件到消息组件

【Azure API 管理】APIM不能连接到 App Service (APIM cannot connect to APP service)

如何将 node.js 服务器变量传递到我的 angular/html 视图中?

Angular 2如何将变量从父组件传递到路由器出口

将数据从 server/app.js 传递到控制器 Angular-fullstack + multer

如何使用 Angularjs 传递数据