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

【问题标题】：How Do I Properly Setup For Cross Domain Script Execution?如何正确设置跨域脚本执行？
【发布时间】：2019-12-16 11:15:02
【问题描述】：

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

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

供应商告诉我们，我们需要实施正确的 CORS 设置才能使其正常工作，除了“其他客户正在使用这种方法”之外没有提供进一步的解释。目前它在控制台中抛出一个错误说明：

Uncaught DOMException: Blocked a frame with origin "[Site B]" from 访问跨域框架。

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

非常感谢任何帮助。

【问题讨论】：

标签： javascript iframe http-headers

【解决方案1】：

CORS 在这里无关紧要。

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

【讨论】：

@ayxos 的答案在技术上也是正确的，尽管我们已经有了这个（只需要验证我做对了）。阅读昆汀的回答后，进一步审查表明报告服务器的脚本不正确。供应商已经修复了，我们只是还没有应用升级。感谢所有回答的人。

【解决方案2】：

为了避免 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

【讨论】：