Reputation: 31
I want to make a request from Outlook Add-ins (built with React) to some APIS using fetch or axios
Here are some urls:
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:
<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>
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
Upvotes: 1
Views: 1849
Reputation: 49455
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.
Upvotes: 1