无法在“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无法在“DOMWindow”上执行“postMessage”：提供的目标来源（“https://outlook.office.com”）与收件人窗口的来源不匹配
【发布时间】：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 应用程序？

标签： angularjs cors outlook-web-addins

【解决方案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 上看到了您的问题，我会尽力提供帮助。