Question

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

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

我现在的问题是，create-react-app开发服务器在端口3002上运行，而Express服务器在3001上。因此，在开发模式下，需要从端口3002到端口3001进行跨域请求，它需要一个绝对URL。但是在生产中，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，然后同步评估该脚本。

从动态生成的URL

1 个答案: