Question

我正在使用React构建一个Web应用程序。在我的组件之一中是一个Iframe元素，用于加载外部网站。当我在localhost上运行react-app时，iframe会毫无问题地加载外部网站。当我在AWS Amplify上部署应用程序时，Iframe不会加载任何内容，并且在检查浏览器中的元素时，我会在Iframe的属性下收到以下消息：

src:
[Exception: TypeError: Illegal invocation at HTMLIFrameElement.invokeGetter (<anonymous>:1:142)]

const body = (
    <div className={classes.modal}>
      <iframe className={classes.iframe} src={"http://www.website.com"}></iframe>
    </div>
  );

<Modal>
        {body}
</Modal>

就像我说的那样，当我在localhost上运行时一切正常，我只需要弄清楚为什么发生此非法调用错误。有人知道这是怎么回事吗？我一直在找东西2个小时，没有任何进展。谢谢

Answer 1

我发现了问题所在，我的Amplify应用程序是一个https，而我要加载的内容是http。浏览器根本不允许将HTTP内容加载到https页面。

ReactJS iframe无法加载页面

1 个答案: