从远程位置加载伴随 Javascript 的资产

Question

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

发生的事情是 webcomponent 使用了资源，例如位于服务器 2 上的图像。但是当 react 应用程序加载 webcomponent 时，由于它在服务器 1 上本地查找图像，因此找不到图像。

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

我能想到的修复是：

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

我希望实现类似 -
由于 react 应用程序知道在哪里访问服务器 2，我们不能编写一些巧妙的 javascript 来让浏览器在服务器 2 加载的 Javascript 请求资源时转到服务器 2。

Answer 1

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

如果您将文件下载为模块脚本（ <script> with type="module" ），您可以使用import.meta.url检索 URL。

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

Web 组件 Javascript 文件示例：

( function ( path ) {
    var base = path.slice( 0, path.lastIndexOf( '/' ) )

    customElements.define( 'my-comp', class extends HTMLElement {
        constructor() {
            super()
            this.attachShadow( { mode: 'open' } )
                .innerHTML = `<img src="${base}/image.png">`
        } 
    } )
} ) ( document.currentScript ? document.currentScript.src : import.meta.url ) 

Answer 2

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