Set Headers in A request that we cannot access in angular ("@angular-architects/module-federation")

huangapple go评论60阅读模式
英文:

Set Headers in A request that we cannot access in angular ("@angular-architects/module-federation")

问题

我有一个 shell 和几个使用 Angular 14 构建的微前端应用。
我使用了 "@angular-architects/module-federation": "^14.3.14"。
一切都运行正常,除了我无法拦截加载微应用的 remoteEntry.js 文件的 http 调用。
所有微应用都部署在服务器上。
我向网关微服务发送请求,网关将我的请求路由到微前端的 URL:

Shell => 网关 => remoteEntry.js 文件

我的授权令牌必须作为标头添加到请求中。
Angular 的 HTTP 拦截器无法拦截此调用。
(我认为它们有不同的作用域)
模块联邦没有提供任何选项来为 HTTP 请求添加标头?
非常感谢任何建议。

我尝试了几种方法来拦截调用并将令牌添加到其中。

英文:

I have a shell and several micro frontend apps all built with Angular 14.
I've used "@angular-architects/module-federation": "^14.3.14".
Everything works fine
Except I could not intercept the http call which loads the remoteEntry.js file of the micro apps.
All micro apps are deployed on the server.
I send request to gateway microservice and gateway routes my request to micro frontend URL:

Shell => gateway => remoteEntry.js file

My authorization token must be added to the request as a header.
Angular HTTP interceptors are not intercepting this call.
(I think they have a different scope)
Module federation did not give any option to add headers to HTTP requests ?
Any suggestions would be greatly appreciated.

I tried several ways to intercept the call and add the token to it.

答案1

得分: 0

该存储库中可以找到,通过向DOM添加一个<script>元素来下载脚本。实际上没有好的方法来强制此库在请求中发送任何标头。

您可以通过发送带有标头的普通Ajax请求,然后创建包含请求内容的脚本标记来重新实现此逻辑,但这听起来不太理想,还需要您处理这些请求的CORS。

英文:

as you can find in the repository, the script is downloaded via adding a &lt;script> element to the dom. There is no good way to actually force this library to send any headers with the request.

you could reimplement this logic in your applilcation by sending ordinary ajax requests with headers, then creating script tag with the contents of the request, but that just sounds not that great and it would require you to handle the CORS for those requests as well

huangapple
  • 本文由 发表于 2023年6月12日 14:41:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76454129.html
  • angular
  • angular-module-federation
  • micro-frontend
  • spring-cloud-gateway
  • webpack-module-federation
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定