使用 postMessage 跨域消息传递

Question

我有一个要求，我需要在 iframe 中打开一个 html 页面，而该页面又放置在另一个 html 页面中（此页面的 uri 以 file:// 开头）。 iframe 和外部 html 页面之间需要有跨域消息传递。当 iframe 内的页面从本地机器加载时，它工作得非常好（外部页面和 iframe 中的页面都有 file:// uri）。

现在，如果我尝试创建一个应用程序，请将其托管在我的本地计算机中并在 iframe 中打开它，虽然页面成功加载，但外框与 iframe 中的页面之间的消息传递失败。

我在 Chrome 中收到以下错误：-

Uncaught SecurityError: Blocked a frame with origin "http://localhost/newapp" 
from accessing a frame with origin "null".  The frame requesting access has a protocol of 
"http", the frame being accessed has a protocol of "file". Protocols must match.

我已经允许托管应用程序的服务器上的跨域请求。我还可以尝试哪些其他步骤来使 postMessage 通信成为可能？

Answer 1

错误信息很明确：您使用的不是相同的协议。一种是使用 HTTP，另一种是使用文件。

作为 Chrome 的安全选择，您需要在 HTTP 或文件协议下提供服务。