I am trying to implement wopi protocol.
Using react, I have an iframe
and a post-form
which sets the content of iframe identified as collabora-online-viewer by requesting to address props.url
with token props.token
, as below (which works correctly):
useEffect(() => {
formElem.current.submit();
});
return (
<div style={{display: 'none'}}>
<form
ref={formElem}
action={props.url}
encType="multipart/form-data"
method="post"
target="collabora-online-viewer"
id="collabora-submit-form"
>
<input
name="access_token"
value={props.token}
type="hidden"
id="access-token"
/>
<input type="submit" value="" />
</form>
</div>
);
// my iframe in another component
<iframe
ref={iframeRef}
title="Collabora Online Viewer"
id="collabora-online-viewer"
name="collabora-online-viewer"
/>
Instead of sending this request by submitting a post-form, I need this request sent by my own express server
using axios. How can i do this?
I have done as below, but it did not work:
//CLIENT SIDE
useEffect(() => {
sendRequest();
}, []);
async function sendRequest() {
const obj = {
url: props.url,
token: props.token
};
await axios
.post('/MyRequest', obj)
.then((res) => {
props.setIframeContent(res.data);
})
.catch((error) => {
console.log(error);
});
}
// my iframe in another component
const [iframeContent, setIframeContent] = useState('');
<iframe
srcDoc= {iframeContent}
ref={iframeRef}
title="Collabora Online Viewer"
id="collabora-online-viewer"
name="collabora-online-viewer"
/>
//SERVER SIDE
routeAuthenticated(
'POST',
'/MyRequest',
async (req, res) => {
try {
await axios
.post(req.body.url, req.body.token, {
// headers: {'Content-Type': 'multipart/form-data'}
})
.then((response) => {
res.send(response.data);
});
} catch (err) {
console.log(err);
}
}
);
Unfortunately it's not possible to post to Office Online Server with JavaScript. When an html form is submitted directly e.g.
<form action="https://someotherorigin.com">
Then no JavaScript is used, so CORS does not come into play when you post to OOS. But axios (or fetch or superagent etc.) use JavaScript, so CORS will block the request. See this SO post for more detail.