从远程位置加载Javascript附带的资产

Question

我们正在运行2台服务器。服务器1托管一个React应用程序。服务器2托管一个作为单个javascript捆绑包公开的Web组件以及一些资产（例如图像）。我们正在服务器1上托管的react应用程序中动态加载服务器2上托管的webcomponent Javascript。事实上，它是一个webcomponent可能会也可能不会影响该问题。

正在发生的事情是，Web组件利用了诸如位于服务器2上的图像之类的资产。但是，当react应用加载Web组件时，找不到图像是因为它在服务器1上本地寻找图像。

我们可以通过多种方式解决此问题。我正在寻找最简单的修复方法。由于Server 1应用程序和Server 2应用程序是由不同的团队开发的，因此两者都应该能够以最自然的方式进行开发，而不会允许其他应用程序潜在地加载其应用程序。

我能想到的解决方法是：

1. 使用绝对URL加载资产-需要提前知道部署位置。
2. 在服务器1上添加反向代理以在遇到特定路径时重定向到服务器2-需要进行配置。 React应用程序可以加载数百个Web组件，即我们需要添加很多反向代理。
3. 将所有资产嵌入到服务器2上的单个javascript中，就像将svgs嵌入到javascript中一样。 -太限制了。如果SVG很大，则会使捆绑包的尺寸更大。

我希望实现-
由于react应用程序知道在何处可以访问Server 2，所以我们不能编写一些巧妙的JavaScript来使Server 2加载的Javascript请求资产时使浏览器进入Server 2。

Answer 1

如果您通过经典脚本（<script>，默认为type="text/javascript"）下载Web组件，则可以使用document.currentScript.src来检索已加载文件的URL。

如果您将文件作为模块脚本下载（{{1}和<script>），则可以使用import.meta.url来检索URL。

然后解析该属性以提取Web组件的基本路径。

Web组件Javascript文件示例：

type="module"

Answer 2

如何将所有必需资产上载到第三位置，或者上载AWS S3存储桶，Google Drive，Dropbox等？这样，这些资产始终具有唯一的已知URL，并且两个团队都可以独立访问它们。只要名称保持不变，URL也将保持不变。