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

Question

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

score 0 · Accepted Answer · answered Nov 05 '21 at 15:29

0

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.

answered Nov 05 '21 at 15:29

CascadiaJS

2,320
2
26
46

So is there a way to handle this CORS problem, while using JS? I need my own server communicate with OOS, rather than my client (browser) @CascadiaJS – mshadi Nov 13 '21 at 12:58
In fact my own server and client are in same address (for example http://localhost:8000). my client send request to my own server (in same ip and port), after that I need my server send request to online office (for example in http://localhost:9980) – mshadi Nov 13 '21 at 13:13

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

1 Answers1