无法在 'DOMWindow' 上执行 'postMessage'：提供的目标来源 ('https://outlook.office.com') 与收件人 window 的来源不匹配

Question

以下是工作 MS Outlook 网络加载项文件的开头。

<!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>

并给出以下控制台错误：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.office.com') does not match the recipient window's origin ('https://localhost').

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

我不能 post 整个应用程序，但我希望这能引起某人的共鸣...我做错了什么？

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

Answer 1

您必须手动 bootstrap 您的 AngularJs 应用程序，因为 Office.js 和 AngularJS 生活在一起似乎有问题。尝试在 Office.initialize() 函数中使用 angular.bootstrap() 手动初始化 AngularJs。手动bootstrapAngularJs时注意不要在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 已经加载。

无法在 'DOMWindow' 上执行 'postMessage'：提供的目标来源 ('https://outlook.office.com') 与收件人 window 的来源不匹配

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.office.com') does not match the recipient window's origin

cors

angularjs

outlook-web-addins