从动态生成的URL同步加载脚本

Question

我的问题在这里有点不合常规，因此需要一些背景知识。 我正在构建一个React应用程序和Express服务器。 首先，对于此应用程序，我需要用户能够输入自己的Google API密钥并将其保存到数据库中，以供将来进行API调用。 我的前端React应用程序需要从脚本标签导入Google API，并在查询参数中添加用户的API密钥。

因此，我要做的是在服务器上创建了一个名为/api/util/googleAPI的路由，该路由将告诉服务器进行AJAX调用，以使用用户的API密钥获取Google API脚本并返回它。 一切正常，我可以在https://domain/api/util/googleAPI使用脚本标签，并使用用户的已保存密钥导入Google API。

我现在的问题是， create-react-app开发服务器在端口3002上服务，而Express服务器在3001上。因此，在开发模式下，需要从端口3002到端口3001进行跨域请求，这需要绝对网址。 但是在生产中，React应用程序已构建并部署在我的Express服务器上，这意味着现在需要将请求发送到3001或相同来源。 因此，我希望它可以在开发和生产中工作，而不必每次都更改URL。 另外，我知道，如果我有一个域名作为端口的别名，那么通常这根本就不是问题，但是该应用程序完全可以在本地网络上而不是在线上进行服务和使用。 因此，我仍然需要指定端口。

现在，我正在尝试生成这样的URL，但是它似乎正在异步加载，因为React应用程序开始运行，并且由于缺少Google API而出错。 但是，在检查器中，仅在应用程序加载后不久，我就能看到Google API已成功导入。

<script>
    (function(d, script) {
        script = d.createElement('script');
        script.type = 'text/javascript';
        script.async = false;
        script.src = 'http://' + window.location.hostname + ':3001/api/util/googleAPI';
        d.getElementsByTagName('head')[0].appendChild(script);
    }(document));
</script>

有什么方法可以使加载的脚本标签同步加载，或者推迟React直到脚本完成加载？

Answer 1

要同步插入脚本标签，唯一的方法是使用document.write('<script src="xxx.js"></script>') 。

脚本包含内容后， document.write()会立即将内容写入DOM，然后对该脚本进行同步评估。