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

时间:2017-07-14 15:15:01

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

我有一个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>

这是我发布到外部网址的表单

<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,如何在我的页面上抓取并处理它们?我需要帮助。

1 个答案:

答案 0 :(得分:0)

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

"site_redirect_url" should be https url

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