reactjspostiframeaxiosms-wopi

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


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

Solution

  • 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.