用服务器端axios代码替换WOPI中的POST表单

Question

我正在尝试实现wopi协议。

使用react，我有一个iframe和一个post-form，它将iframe的内容设置为collaboration -online-viewer通过请求用令牌props.token来寻址props.url，如下所示(正常工作):

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"
/>

不是通过提交post-form发送此请求，我需要由我自己的express server使用axios发送此请求。我该怎么做呢?

我已经做了下面的操作，但它没有工作:

//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);
}
}
);

Answer 1

不幸的是，这是不可能发布到Office在线服务器与JavaScript。当直接提交html表单时，例如

<form action="https://someotherorigin.com">

然后没有使用JavaScript，所以当你发布到OOS时，CORS不会起作用。但是axios(或fetch或superagent等)使用JavaScript，因此CORS将阻止请求。更多细节请看这篇文章。