本地开发时 iframe 权限被拒绝错误：我有啥选择？

Posted 2023-02-25

【中文标题】本地开发时 iframe 权限被拒绝错误：我有啥选择？

【英文标题】：Iframe permission denied error when developing locally: what are my options?本地开发时 iframe 权限被拒绝错误：我有什么选择？

【发布时间】：2011-02-27 18:36:12

【问题描述】：

这是怎么回事：

我有一个应用程序 A 托管在 a.mycompany.com 和一个应用程序 B 托管在 b.mycompany.com

应用程序 A 包含一个 iframe，其中包含应用程序 B 中包含的页面。

<!-- In A's index.html: -->
<iframe src="http://b.mycompany.com/something.html" >

我需要让父级与 iframe 对话或 iframe 与父级对话。

它在服务器上工作正常，但是当我在本地开发时，我有两个不同的服务器在不同的端口上运行，所以我必须通过以下方式访问它们：

http://a.mycompanydev.com:1234
http://b.mycompanydev.com:5678

这会导致安全错误，因为您无法使用 JS 与来自不同域/子域或使用不同端口的 iframe 进行通信。

我能做什么？？

---

相关服务器故障问题：https://serverfault.com/questions/148171/how-to-map-localhost8080-to-simply-localhost

【参考方案1】：

您可以使用片段 id 消息传递，这是一种使用 window.location.hash（# 之后的 URL 部分）进行通信的 hack。这个test page 有一个例子。还有一些库，例如 Dojo 可以促进这一点。

如果只需要支持最近的浏览器，可以使用postMessage。

【讨论】：

感谢您的回答！您能否详细说明这是什么或如何实现？

这是一个想法 - 一个窗口/iframe 中的代码可以写入（但不能读取）页面上每个其他 iframe 的位置，即使它属于另一个域。所以，iframe A 会修改 iframe B 的 url，在#（片段标识符）后面添加一些内容。另一方面，iframe B 将持续监控其 url 以识别消息。我相信有些图书馆可以使您免受血腥细节的影响，您只需在谷歌上搜索即可。

如果要应用它，那么您应该选择像 easyXDM 这样的现成解决方案。它远远超出了 Dojo（和任何其他库）所拥有的。但在这种情况下，我个人会使用代理，它并不困难，可以通过简单的脚本提供。

【参考方案2】：

除了上面 Matthew 提到的 postMessage 和 location 散列之外，您可能还需要考虑使用在本地运行的代理服务器。代理服务器将监听 80 端口，并根据 http 请求中指定的域名转发到相应的目标端口。然后，您只需在端口 80 上正常访问您的网站，一切就会正常运行。

【讨论】：

代理的想法很好，但它需要团队中的每个人都设置这个代理，这是不可接受的......