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

问题

The following is the start of a file form a working MS Outlook web add-in.

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

However, the demo is using JQuery, and I want to replace it with an existing AngularJs, modified to be a web add-in.

My file starts

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

and gives the following consiole error:

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

Which looks like a CORS problem. But why did I not get it from the file above, which is in the same directory on localhost?

I can't post the entire app, but I am hoping that this strikes a chord in someone's memory ... What am I doing wrongly?

[Update] unlike some similar questions, there are no iframes involved. Also, adding <AppDomain>https://outlook.office.com</AppDomain> did not help (but why should it, when the page I copied from had no problems?)

回答1:

You must manually bootstrap your AngularJs app because Office.js and AngularJS seem to have problems to live together. Try to initilize AngularJs manually with angular.bootstrap(), within the Office.initialize() function. When you bootstrap AngularJs manually pay attention to not use ng-app="myApp" in index.html.

I.e.

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

EDIT:

if you don't want jQuery

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

Or even more if your app.js is at the bottom of the html just near the </body> you can simply use angular.bootstrap(document, ['myApp']) because the DOM has already loaded.

来源：https://stackoverflow.com/questions/53946813/failed-to-execute-postmessage-on-domwindow-the-target-origin-provided-htt

标签

angularjs

cors

outlook-web-addins