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

【问题标题】：How to POST form data in React without external API如何在没有外部 API 的情况下在 React 中发布表单数据
【发布时间】：2020-09-19 07:26:53
【问题描述】：

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

特别是，我正在尝试在 ReactJS 中执行此操作，因为它简化了该项目的所有其他方面。

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

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

然而，当我查看React documentation on forms 时，我什至没有看到有关表单方法的讨论，例如 GET 和 POST。我知道 React 会希望通过类似 onClick() 函数的方式来处理这个问题，但是如果不让数据看起来像是来自我的服务器而不是 Worker 的浏览器，我看不到任何在 React 中执行此操作的方法。

【问题讨论】：

标签： reactjs mechanicalturk

【解决方案1】：

最好的办法是使用内置的 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 之类的用户操作调用此获取调用。

【讨论】：

经过一番认真的努力——并包裹在 useState 和 useEffect 挂钩中——这看起来可能会奏效。就在我弄清楚如何解决 CORS 问题时，我就像一颗地雷一样等着我。所以我可以投票，但我还不能接受，因为我还没有证明它有效。
是的，这是标准的做法，我的意思是有像 axios 这样的第三方库，但我看到这是最常用的。 CORS 是一个不同的故事，也许这会有所帮助：javascript.info/fetch-crossorigin

【解决方案2】：

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

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

【讨论】：

我对 Axios 的了解不够，无法知道：这看起来像是来自服务器还是来自 Worker 的浏览器？
@Novak，这是从浏览器直接发送的。你不需要任何后端来做到这一点。考虑 React crate HTTP 调用看起来像提交表单。就这么简单。