How to make a http request in Outlook add-ins?

Question

I want to make a request from Outlook Add-ins (built with React) to some APIS using fetch or axios

Here are some urls:

• https://jsonplaceholder.typicode.com/users/1
• https://api.github.com/users/1
• localhost

Add-in in web version works just fine, but in my Outlook 2016 Desktop doesn't work. Testing on my Express server, Outlook 2016 Desktop event didn't fire a request

I follow these steps:

• manifest.xml

<AppDomains>
    <AppDomain>https://www.contoso.com</AppDomain>
    <AppDomain>https://jsonplaceholder.typicode.com</AppDomain>
    <AppDomain>https://api.github.com/users</AppDomain>
    <AppDomain>http://localhost:3001</AppDomain>
    <AppDomain>https://localhost:3001</AppDomain>
</AppDomains>

• Test.tsx

import axios from "axios";
import React, { useEffect, useState } from "react";

const Test = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // axios.get("https://jsonplaceholder.typicode.com/users/1").then((res) => setUser(res.data));
    // axios.get("http://localhost:3001/my-test").then((res) => setUser(res.data));
  }, []);
  return <div>user: {user && user.name}</div>;
};

export default Test;

Using xhr works but I don't know why

 var xhr = new XMLHttpRequest();

    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === 4) {
        setUser(JSON.parse(this.responseText));
      }
    });

    xhr.open("GET", "http://localhost:3001/my-test");
    xhr.setRequestHeader("Content-Type", "application/json");

    xhr.send();

There is also a random issue with loading css file (most of the time happens)

<link href="taskpane.css" rel="stylesheet" type="text/css"/>

included in header of taskpane.html also

Answer 1

The same-origin policy enforced by the browser prevents a script loaded from one domain from getting or manipulating properties of a webpage from another domain. This means that, by default, the domain of a requested URL must be the same as the domain of the current webpage. For example, this policy will prevent a webpage in one domain from making request web-service calls to a domain other than the one where it is hosted.

Because Office Add-ins are hosted in a browser control, the same-origin policy applies to script running in their web pages as well.

Read about possible workarounds in the Addressing same-origin policy limitations in Office Add-ins article.