如何在没有外部 API 的情况下在 React 中发布表单数据

Question

我正在与 Amazon 的 Mechanical Turk 合作，尝试构建一个 ExternalQuestion 站点，该站点使用表单将数据发回 AMT——这是从其 API 要求的 ExternalQuestion 传回答案的典型方法。

非常具体地说，我试图在 ReactJS 中做到这一点，因为它简化了这个项目的所有其他方面。

是否可以在不使用 Flask/python 等外部后端的情况下将 React 发送到 POST 表单数据？

这是一个重要的要求，因为据我从这些信息（以及我自己浪费的时间）可以看出，使用 Flask/python 将使 POST 数据看起来像是来自我的服务器，而不是 Worker 的浏览器，并且会得到拒绝了。

然而，当我查看有关表单的React 文档时，我什至没有看到对表单方法的讨论，例如 GET 和 POST。 我知道 React 会希望通过诸如 onClick() 函数之类的东西来处理这个问题，但是我看不出有任何方法可以在 React 中做到这一点，而不会使数据看起来像是来自我的服务器而不是 Worker 的浏览器。

Answer 1

表单发布只是带有表单数据或 x-www-form-urlencoded 正文的 XHR POST 并返回文本/HTML。 这可以在带有 Axios 的 React 上完成。

此答案显示使用 Axios 发送表单数据 -> https://stackoverflow.com/a/47630754/3849555

Answer 2

最好的办法是使用内置的 JavaScript Fetch API和FormData接口。

对于正文，您可以传入可以使用FormData接口生成的有效负载； MDN 关于它的文档：

FormData 接口提供了一种轻松构造一组表示表单字段及其值的键/值对的方法，然后可以使用 XMLHttpRequest.send() 方法轻松发送这些键/值对。 如果编码类型设置为“multipart/form-data”，它使用与表单相同的格式。

不要使用XMLHttpRequest ， fetch 是基于它构建的较新的。

带有 fetch 的通用示例如下所示：

const formData = new FormData();

formData.append('username', 'abc123');
formData.append('foo', 'bar);

fetch('https://example.com/foo/bar', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', JSON.stringify(response)))

然后可以根据用户操作（如onClick调用此 fetch 调用。