Question

我们使用第三方报告应用程序服务器。我们的应用程序（我们称之为站点A）包括一个由报告服务器提供的脚本，该脚本具有嵌入报告的方法。调用该方法时，它会创建一个iFrame，从报告服务器加载请求的报告，脚本和样式（我们将此网站称为B）。

报告页面按预期加载，嵌入在iFrame中。报告中的交互按预期运行。但是，报告页面（来自站点B）然后将postMessage（）发送到父（站点A）以调用方法来调整容纳iFrame的容器元素的大小，并将另一个postMessage（）发送到父级（站点A）以滚动到同一容器元素的顶部。

供应商告诉我们，我们需要实施适当的CORS设置才能使其正常工作，除了“其他客户正在使用此方法”之外，不提供任何进一步的解释。目前它在控制台中引发错误说明：

未捕获DOMException：阻止来自“[站点B]”的原始帧访问跨源框架。

我在过去两天在MDN和其他网站上阅读了大量文档，我仍然对哪个服务器应用哪些设置感到困惑？我已经看到了几个关于在这里和那里设置标题的例子，但我读过的几乎所有内容都只适用于从客户端（由站点A提供服务）向远程（站点B）发出Ajax请求，并且根本不需要什么。对于我们正在处理的场景。谁在那里可以解决这里的问题？哪个服务器需要哪个标头？

非常感谢任何帮助。

Answer 1

为了避免CORS问题，您需要以下内容：如果站点A使用iframe加载站点B.在站点B NGINX / APACHE配置中，您需要包含此标题：

add_header 'Access-Control-Allow-Origin' "$http_origin" always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;

在APACHE上：https://enable-cors.org/server_apache.html

NGINX上的

：https://enable-cors.org/server_nginx.html

Answer 2

CORS在这里无关紧要。

错误消息表明站点B正在尝试访问站点A上被禁止的内容。这意味着站点B 应使用postMessage，但不是（或至少不正确）。

如何正确设置跨域脚本执行？

2 个答案: