javascript - 从远程位置加载 Javascript 附带的资源

Question

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

发生的情况是，Web 组件使用了位于服务器 2 上的图像等 Assets 。但是当 React 应用程序加载 Web 组件时，由于在服务器 1 上本地查找图像，因此找不到图像。

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

我能想到的修复是:

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

我希望实现类似 -
既然 React 应用程序知道在哪里访问服务器 2，我们就不能编写一些巧妙的 javascript 来让浏览器在服务器 2 加载的 Javascript 请求 Assets 时转到服务器 2 吗？

Answer 1

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

如果您将文件下载为模块脚本( <script> 和 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 )