无法在 iFrame 内加载数据答案

【问题标题】：Failed to load data inside of iFrame无法在 iFrame 内加载数据
【发布时间】：2018-11-21 18:22:19
【问题描述】：

我尝试获取旧网站的网址，但发生错误：

Fetch API cannot load http://xyz.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://abc' is therefore not allowed access.
If an opaque response serves your needs, set the request's mode to 'no-cors'
to fetch the resource with CORS disabled.

我的代码是这样的

render(){
    return (
       <div>
          <iframe src="http://localhost:8080/.../StockExchangeWidget.html" />
       </div>
    )
}

当我在 iFrame 之外加载它时，一切正常，但是当我尝试用 iFrame 很好地加载它时，我得到了很多错误，但仅适用于图表数据，因为您可以看到框架和按钮已加载。

当我尝试通过 url 内部的 url 加载 HTML 页面时，我也遇到了 WebSocket 错误 WebSocket 连接到“wss://widgetdata.tradingview.com/socket.io/websocket?from=widgetembed%2F&date=2018_06_09-17_59”失败：WebSocket 握手期间出错：意外响应代码：403

【问题讨论】：

标签： html reactjs sockets websocket

【解决方案1】：

托管 iframe 的域需要修改其 CORS Policy 以允许来自您的域的请求到达其站点。如果该页面上没有 CORS 标头，您的浏览器将不会呈现 iframe 的内容（出于安全原因）。

【讨论】：

【解决方案2】：

是的，答案在 CORS Policy 中，正如 PANAYIOTIS 指出的那样。

我的代码现在看起来像这样

render(){
    return (
        <div>    
            <iframe
                sandbox="allow-same-origin"
                title="FirstIFrame"
                src="http://www.tricky.web.siteHome.do"
            />    
        </div>
    )
}

我在 iframe 中添加了 sandbox="allow-same-origin"，所有“cookies”和“无法上传”问题都解决了。

更多信息请阅读this post这对这类问题非常有用：

【讨论】：