【问题标题】：iFrame is not displaying website (cross-site request error)iFrame 不显示网站（跨站请求错误）
【发布时间】：2021-01-17 08:46:42
【问题描述】：

我一直在冒险在我的洞穴中获得一个体育博彩仪表板。主要目标是显示我的首选体育博彩的台词。基于一些谷歌搜索和挖掘所有 API 的成本。我决定使用 Pregame 的 Game Center，反正我经常使用它。

所以他们已经为 GameCenter 嵌入了代码，我有一个相当基本的 HTML 页面，但有些地方不太正确，而且它的显示很不稳定。我不知道是我的代码还是 Pregame 的问题。任何帮助或指导将不胜感激。

静态页面链接：https://dashboard.megustasports.com/Untitled-1.html

赛前游戏中心：https://pregame.com/game-center

编辑

以下是来自 Chrome 控制台的错误

指示是否在跨站请求中通过以下方式发送cookie 指定其 SameSite 属性因为 cookie 的 SameSite 属性未设置或无效，默认为 SameSite=Lax，这可以防止 cookie 在跨站点请求中发送。这种行为可以保护用户数据不被意外泄露给第三方各方和跨站点请求伪造。

通过更新 cookie 的属性解决此问题：指定 SameSite=None 和 Secure 如果 cookie 应该在跨站点发送要求。这允许第三方使用。指定 SameSite=Strict 或 SameSite=Lax 如果不应该在跨站点请求中发送 cookie

9 cookie 名称域和路径 .te.dpr pregame.com/ _ga .pregame.com/ _gid .pregame.com/ .te.w pregame.com/ Telligent.Evolution-UI pregame.com/ tzoffset pregame.com/ tzid pregame.com/.te.dpr pregame.com/utility .te.w pregame.com/utility 2 请求 pg.authentication.js error-notfound.aspx?item=%2fassets%2fscripts%2fpg....entication&user=extranet%5cAnonymous&site=website

这是我目前使用的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Here the title</title>
    <style>
            *{
                margin: 0px;
            }
            iframe {
                display: block !important;
                width: 100%;
                height: 100vh;
            }
    </style>
</head>
<body>

 
    <script src="https://pregame.com/assets/scripts/tear/tear.js" data-type="generic" data-url="https://pregame.com/game-center?ts_i=game-center"></script>




</body>
</html>

理论上，最终结果应该只包含上面链接页面中的表格，并且看起来类似于以下内容：

【问题讨论】：

您的静态页面不再工作，看起来 pregame 已被 CORS 政策阻止。（如果他们提供了一个 api，那么你应该可以让它畅通无阻）
您的 iframe 静态页面中没有 html...这就是它没有显示的原因。
您的赏金将在几个小时后到期。如果我的回答足够，请考虑接受我的回答和/或奖励赏金，否则提供反馈或更新您的问题，以便我和其他人可以尝试充分回答您的问题。请参阅：stackoverflow.com/help/bounty 和 stackoverflow.blog/2011/09/23/bounty-reasons-and-post-notices

标签： html cors

【解决方案1】：

尝试发出 HTTP 请求并将其存储在 div 中，而不是使用 iframe：

var cors_api_url = 'https://cors-anywhere.herokuapp.com/';

function doCORSRequest(options, printResult) {
  var x = new XMLHttpRequest();
  x.open(options.method, cors_api_url + options.url);
  x.onload = x.onerror = function() {
    printResult(
      (x.responseText || '')
    );
  };
  if (/^POST/i.test(options.method)) {
    x.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  }
  x.send(options.data);
}

doCORSRequest({
  method: 'GET',
  url: 'https://pregame.com/game-center/',
  data: ''
}, function printResult(result) {
  document.querySelector('.result').innerHTML = result;
});

&lt;div class="result"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

问题

CORS 旨在防止恶意网站模仿合法网站。 Pregame Game Center 的 CORS 政策要求嵌入包含其网站的 iframe 的网站位于同一域中。要使用您域中的 iframe，Pregame Game Center 开发人员必须将您的域添加到他们的 CORS 策略中。

解决方案

请考虑以编程方式浏览他们的网站并从中提取您需要的信息（抓取），然后创建您自己的网站来显示该信息。这是最迂回的方式，但如果没有可用于访问所需信息的 API，则普遍接受。通过调查，您甚至可能会遇到他们的前端使用 JSON 格式的端点来检索您可以使用的要显示的信息（他们的私有 API）。

注意

Pregame Game Center 产生的抓取和重新发布信息可能违反其条款和条件。如果您在本地托管网站，或者在身份验证后远程托管，您可能能够避免法律影响。

参考文献

CORS：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

网页抓取（Python - Beautiful Soup）教程：https://realpython.com/beautiful-soup-web-scraper-python

Django（Python 网络框架）：https://www.djangoproject.com

【讨论】：

我认为您误读了该问题，然后对其进行了更新以适合您的答案！请参阅“有些事情不太正确，并且显示的很不稳定” - 这怎么会受到 CORS 的影响？虽然可复制有 CORS 问题，但它不是被问到的问题。我认为可复制的设置不正确（或暂时不可用）
@Greg 根据 Pregame Game Center 上现有的 CORS 政策，我不确定作者是如何让这个工作的。 Wonky == JavaScript 正在执行，但 iFrame 中没有内容，据我了解，因为使用的 JavaScript 只是创建一个 Game Center Pregame iFrame。

【解决方案3】：

您不能使用iframe 显示某些网站，例如Google。
这是为保护其网站和客户数据免受攻击而实施的一项安全措施。

如果您想获得该网站的一些详细信息，您可以使用他们的API（如果他们提供）。
这是最好的选择。

您可以根据自己的要求在网上搜索一堆可用的 API。

【讨论】：