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

Question

我正在尝试实现wopi 协议。

使用 react，我有一个 iframe 和一个 post-form，它通过请求地址 @987654324 将 iframe 的内容设置为 collabora-online-viewer @ 带有令牌props.token，如下（正常工作）：

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

我需要由我自己的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

很遗憾，无法使用 JavaScript 发布到 Office Online Server。直接提交 html 表单时，例如

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

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