title: Calling Web Service From Outlook Mail Add-In
body: <p>I'm a bit stuck on this one problem I have with an Outlook Mail Add-In.
  I am using an Office 365 developer account, where the Mail Add-In will show (Online, in browser):
  <a href="https://i.stack.imgur.com/ZQ9qt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQ9qt.png" alt="enter image description here"></a></p>
  
  <p>I want to call a REST Web Service when I click the button.</p>
  
  <p>First, let me post my HTML: </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;link href="../../Content/Office.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;!-- To enable offline debugging using a local reference to Office.js, use:                        --&gt;
      &lt;!-- &lt;script src="../../Scripts/Office/MicrosoftAjax.js" type="text/javascript"&gt;&lt;/script&gt;  --&gt;
      &lt;!-- &lt;script src="../../Scripts/Office/1.1/office.js" type="text/javascript"&gt;&lt;/script&gt;  --&gt;
  
      &lt;link href="../App.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="../App.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;link href="Home.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="Home.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--Header and Footer tags not supported--&gt;
      &lt;div id="content-main"&gt;
          Click this button to test the create method
          &lt;br /&gt;
          &lt;label id="lblMessage"&gt;Message will appear here&lt;/label&gt;
          &lt;button id="btnTest" type="button"&gt;Perform Test Create&lt;/button&gt;
  
          &lt;!--&lt;iframe id="my_api_iframe"&gt;&lt;/iframe&gt;--&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the HTML for what we see in the first screenshot.</p>
  
  <p>The Office.initialize JS code, for those who want to see:</p>
  
  <pre><code>Office.initialize = function (reason) {
          //_mailbox = Office.context.mailbox;
          ////Request identity token from Exchange Server.
          //_mailbox.getUserIdentityTokenAsync(getTokenCallback);
  
          $(document).ready(function () {
              app.initialize();
              //SET Variables
              loggedInUserDisplayName = Office.context.mailbox.userProfile.displayName;
              loggedInUserEmailAddress = Office.context.mailbox.userProfile.emailAddress;
              var conversationID = Office.context.mailbox.item.conversationId;
              var internetMessageID = Office.context.mailbox.item.internetMessageId;
              var itemID = Office.context.mailbox.item.itemId;
  
              //$('#lblMessage').text("ConversationID:" + convoID + " InternetMessageID:" + intMessID + " ItemID:" + itemID);
  
              $("#btnTest").click(function () {
                  GetList();
                  //GetList2();
              });
          });
      };
  </code></pre>
  
  <p>I have tried different ways to do this. When the button is clicked, it calls the specified function, here's a few ways I have tried:</p>
  
  <pre><code>function GetList() {
          jQuery.support.cors = true;
          $.ajax({
              type: "GET",
              url: [URL to WebMethod],
              success: function (data, textStatus) {
                  $('#lblMessage').text("Success");
              },
              error: function (xhr, textStatus, errorThrown) {
                  $('#lblMessage').text("Error: " + errorThrown + " StatusCode: " + textStatus + " XHR: " + xhr.readyState);
              }
          });
      }
  </code></pre>
  
  <p>But when the button is clicked and I call this function, this is the error I get:
  <a href="https://i.stack.imgur.com/yZy7y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yZy7y.png" alt="enter image description here"></a></p>
  
  <p>The 2nd function I tried:</p>
  
  <pre><code>function GetList2() {
          $.ajax({
              type: "GET",
              url: [URL to WebMethod], xhr: function () {
                  return new ($('#my_api_iframe')[0].contentWindow.XMLHttpRequest)();
              }, success: function (html) {
                  // format and output result
                  $('#lblMessage').text(html);
              }, error: function (xhr, textStatus, errorThrown) {
                  // format and output result
                  $('#lblMessage').text(errorThrown);
              }
          });
      }
  </code></pre>
  
  <p>But no avail. This is the error I get: 
  <a href="https://i.stack.imgur.com/8IQ8v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8IQ8v.png" alt="enter image description here"></a></p>
  
  <p>Last function I tried:</p>
  
  <pre><code>function getTokenCallback(asyncResult) {
          var token = asyncResult.value;
  
          // Create a web service call and pass the token as part of the call.
          _xhr = new XMLHttpRequest();
          _xhr.open("GET", [URL to WebService]);
          _xhr.setRequestHeader("Content-Type", "application/xml; charset=utf-8");
          _xhr.onreadystatechange = readyStateChange;
  
          var request = new Object();
          request.token = token;
          request.
          request.phoneNumbers = _om.get_item().getEntities().phoneNumbers;
  
          _xhr.send(JSON.stringify(request));
      }
  </code></pre>
  
  <p>But I get the same "access is denied" error as before, at the point where I do the _xhr.open().</p>
  
  <p>Can anyone maybe help me in the right direction to get these REST Services called? They all return data in XML Format, that's why I used ContentType of "application/xml".</p>
  
  <p>Any help will be greatly appreciated, even if it's a completely different way than what I'm trying to do :).</p>