无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“https://outlook.office.com”）与收件人窗口的来源不匹配

Posted 2023-03-04

技术标签:

【中文标题】无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“https://outlook.office.com”）与收件人窗口的来源不匹配【英文标题】：Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.office.com') does not match the recipient window's origin 【发布时间】：2019-05-25 14:05:54 【问题描述】：

以下是工作 MS Outlook Web 插件文件的开头。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <title></title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css" />
  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css" />

  <script src="../../Assets/Scripts/jquery.fabric.js" type="text/javascript"></script>

  <link href="../../App.css" rel="stylesheet" type="text/css" />
  <script src="../../App.js" type="text/javascript"></script>

  <script src="Demo.js" type="text/javascript"></script>
</head>

但是，演示使用的是 JQuery，我想用现有的 AngularJs 替换它，修改为 Web 插件。

我的文件开始

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />  
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script> 
    <script src="MyDialogView.js" type="text/javascript"></script> 
  <title>MyApp</title>
</head>

并给出以下控制台错误：

在“DOMWindow”上执行“postMessage”失败：提供的目标原点 ('https://outlook.office.com') 与收件人窗口的原点 ('https://localhost') 不匹配。

这看起来像是一个 CORS 问题。但是为什么我没有从上面的文件中得到它，它在 localhost 的同一目录中？

我不能发布整个应用程序，但我希望这能引起人们的记忆……我做错了什么？

[更新] 与一些类似的问题不同，不涉及 iframe。另外，添加<AppDomain>https://outlook.office.com</AppDomain> 并没有帮助（但是当我从中复制的页面没有问题时，为什么要这样做？）

【问题讨论】：

查看this question问题可能与AppDomain有关。非常感谢，Suresh。我试过了，并更新了我的问题。它没有用，我小心地清除浏览器缓存并重新加载清单:-( 如果您在 Outlook for Windows 中遇到此问题，还可以尝试另一件事。将兼容性设置为 IE=Edge，好像postMessage 存在浏览器兼容性问题你为什么说不涉及iframe？您如何授予用户在您的应用中访问其帐户的权限？不，只是想多了解一点。您是否手动引导您的 Angular 应用程序？ 【参考方案1】：

您必须手动引导您的 AngularJs 应用程序，因为 Office.js 和 AngularJS 似乎无法同时使用。尝试在Office.initialize() 函数中使用angular.bootstrap() 手动初始化AngularJs。当您手动引导 AngularJs 时，请注意不要在 index.html 中使用 ng-app="myApp"。

即

Office.initialize = function () 
   $(document).ready(function ()  // If you want jQuery too
      angular.bootstrap(document, ['myApp'])
   );

var app = angular.module('myApp', [// Other config...]);
// Your app config and code

编辑：

如果你不想要 jQuery

Office.initialize = function () 
   angular.element(document).ready(function () 
      angular.bootstrap(document, ['myApp'])
   );

甚至更多，如果您的 app.js 位于 html 底部，就在 </body> 附近，您可以简单地使用 angular.bootstrap(document, ['myApp'])，因为 DOM 已经加载。

【讨论】：

如果我不想要 jQuery，我只需删除 $(document).ready?如果是这样，我该如何等到页面加载完毕后再启动我的 Angular 应用程序？ @Mawg 您可以使用上述选项：1）使用 jQlite 方式，如 AngularJs Doc angular.element(document).ready 和 AngularJs 等待 dom 已为您加载或 2）将您的脚本放在底部页面并仅使用angular.bootstrap(document, ['myApp']) 谢谢，Emanuele 我昨天没有时间尝试，但今天下午和整个周末都有时间。如果这行得通，预计会有超过 50 个奖励积分:-) 希望如此！谢谢 @Mawg 接受答案。如果你没有解决你的问题，我不高兴。我会尽快写一封电子邮件。我在 stackexchange 上看到了您的问题，我会尽力提供帮助。

以上是关于无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“https://outlook.office.com”）与收件人窗口的来源不匹配的主要内容，如果未能解决你的问题，请参考以下文章

无法使用 Stripe 支付模块在“DOMWindow”上执行“postMessage”

Google Picker 拒绝加载错误“无法在 'DOMWindow' 上执行 'postMessage'：提供的目标来源”

无法使用 Google 代码在“DOMWindow”上执行“postMessage”

无法在“DOMWindow”上执行“postMessage”：提供的目标原点与接收窗口的原点不匹配（“null”）

使用JSONP创建Blogger站点：无法在'DOMWindow'上执行'postMessage'

无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“https://outlook.office.com”）与收件人窗口的来源不匹配