ReactJS：如何从外部应用程序接收表单数据答案

【问题标题】：ReactJS: how do I receive form data from external applicationReactJS：如何从外部应用程序接收表单数据
【发布时间】：2017-07-14 15:15:00
【问题描述】：

我有一个 ReactJS 应用程序。该应用程序将表单提交到外部 url。因此，当提交表单时，如果发生错误，外部 url 的服务器使用表单中提供的重定向 url 将错误消息和状态发送回应用程序。所以我想要的是能够读取从外部应用程序发送的 POST 表单数据，这样我至少可以显示错误。我遇到的问题是，当外部服务器重定向到我提供的 url 时，它会在截获的页面上显示“无法 POST /”。它甚至没有加载该页面上的组件，然后在控制台上显示“加载资源失败：服务器响应状态为 404（未找到）：8000/#/payment-confirmation” 下面是我的路由器：

import PaymentPreview from './payment-preview';
import PaymentConfirmation from './payment-confirmation';
      <Switch>
        ...
        <Route path='/payment-preview' component={PaymentPreview} />
        <Route path='/payment-confirmation' component={PaymentConfirmation} />
      </Switch>

这是我发布到外部 URL 的表单

<form action="url-goes-here" method="POST" target="_blank">
                      <input type="hidden" name="product_id" value="10" />
                      <input type="hidden" name="pay_item_id" value="20" />
                      <input type="hidden" name="amount" value="5000" />
                      <input type="hidden" name="currency" value="599" />
                      <input type="hidden" name="site_redirect_url" value="http://localhost:8000/#/payment-confirmation" />
                      <input type="hidden" name="txn_ref" value="3834734873dshjhj3434" />
                      <input type="hidden" name="cust_id" value="5664" />
                      <input type="hidden" name="site_name" value="MySite" />
                      <input type="hidden" name="cust_name" value="Anietie Asuquo" />
                      <input type="hidden" name="hash" value="hash" />
                      <input type="hidden" name="mac" value="mac" />
                      <RaisedButton
                        type="submit"
                        label="Confirm & Pay"
                        primary={false}
                        className="normal-case"
                        keyboardFocused={true}
                        backgroundColor="#E53935"
                        labelColor="#ffffff"
                        fullWidth={true}
                        // onTouchTap={this.formSubmit}
                      />
                    </form>

当我检查 chrome 网络选项卡时，我看到服务器发送的 formData，我如何在我的页面上抓取和处理它们？我需要帮助。

【问题讨论】：

您是否有运行可以响应发布请求的服务器？
不，我不会，应该吗？我的意思是我可以创建一个 Express 服务器来执行此操作，只是我认为我可以像读取 GET url 查询一样读取 POST 数据。
请问您知道如何使 Express 服务器与 React 应用程序一起运行并且只处理来自外部 url 的 post 请求吗？另外，我如何获取从发布请求到反应应用程序的数据？

标签： javascript reactjs post react-router react-redux

【解决方案1】：

我遇到了同样的问题。现在它修复了

"site_redirect_url" should be https url

我无法从我的开发环境中修复它。所以我将我的项目上传到测试环境或生产环境，然后我将我的测试或生产域 url 转换为https。终于可以完美运行了。

【讨论】：