如何处理在 React 中加载额外资源的脚本？

Question

我正在使用

create-react-app

在 React 中开发一个网站。我正在使用外部脚本来实现与信用卡支付相关的一些功能（在本例中为

Clover

）。该脚本将 iframe 添加到页面，这些 iframe 本身会从同一域加载一些附加资源，例如其他脚本和样式表。这一切都很好。然而，在开发过程中，当此脚本尝试创建令牌来处理付款时，它会调用另一个子域，并且出现以下错误：

从源“https://checkout.sandbox.dev.clover.com”获取“https://token-sandbox.dev.clover.com/v1/tokens”的访问已被 CORS 策略阻止：否“ Access-Control-Allow-Origin'标头存在于所请求的资源上。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我尝试使用 http-proxy-middleware 代理第一个脚本，但所有附加资源的加载都是相对的，并且失败，因为它们现在指向 localhost。

Answer 1

回答我自己，以防有人偶然发现这一点。

事实证明，这个错误不是由我自己的代码引起的，而是 Clover 托管的 iframe 集成中的错误，当输入不符合其喜好（例如没有姓氏的名称或格式错误的邮政编码）时，有时会出错。 iframe 通常会抛出错误，您可以捕获并显示这些错误，但这些似乎是实际的错误，或者在 Clover 方面没有正确处理，最终抛出这个与问题无关的令人困惑的错误。摆弄输入通常会让它最终起作用。