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

Question

我正在尝试实施 wopi 协议。

使用 React，我有一个 iframe 和一个 post-form，它们将 iframe 的内容设置为 collabora-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 表单来发送此请求，我需要使用 axios 由我自己 express server 发送此请求。我该怎么做？

我做了如下操作，但是没有用：

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

遗憾的是，无法使用 JavaScript post 到 Office Online Server。当直接提交 html 表单时，例如

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

然后不使用 JavaScript，因此当您 post 到 OOS 时，CORS 不会发挥作用。但 axios（或 fetch 或 superagent 等）使用 JavaScript，因此 CORS 将阻止请求。有关详细信息，请参阅此 SO post。

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

Replacing POST Form in WOPI by axios code in server-side

iframe

post

reactjs

ms-wopi

axios