Javascript 使用reactJs和NodeJs发出http post请求

我在我的一个reactJs文件中有一个注册表，它接受输入字段的所有值（正如我所期望的那样）
SignUp.js

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
类注册表单扩展组件{
构造函数（）{
超级（）；
此.state={
电子邮件：“”，
密码：“”，
用户名：“”，
我同意：错，
formErrors:{电子邮件：''，密码：'}，
emailValid:false，
passwordValid:false，
formValid:false
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
设target=e.target；
让value=target.type=='checkbox'？target.checked:target.value；
让name=target.name；
this.setState（{[name]：value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
log（'提交表单时包含以下数据：'）；
log（[this.state.email，cryptr.encrypt（this.state.password），this.state.username，this.state.hasAgreement]）；
//我想将上述数据发送到节点服务器
}
render（）{
返回(
用户名
密码
电子邮件地址
我同意所有的声明
);
}
}
导出默认注册表您需要做的是将数据作为对象传递给axios，就像这样，您指出您已经在项目中安装了axios

const formData = {
    email: this.state.email,
    password: cryptr.encrypt(this.state.password)
    username: this.state.username,
    hasAgreed: this.state.hasAgreed
}

axios({
    method: 'post',
    url: '/register',
    data: formData,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
})
.then(function (response) {
    //handle success
})
.catch(function (response) {
    //handle error
});

表单的默认行为是在单击“提交”按钮时提交，或者在用户点击enter时提交。然而，在您的情况下，您有一个这样的提交处理程序

handleSubmit(e) {
        e.preventDefault();

        console.log('The form was submitted with the following data:');

        console.log([this.state.email, cryptr.encrypt(this.state.password), this.state.username, this.state.hasAgreed]);

       //I want to send my above data to node server

    }

在这个处理程序中，您正在编写
e.preventDefault（），顾名思义，它阻止表单的默认行为发生。因此，实际上没有向服务器发出任何请求

现在我所知道的最可靠的方法就是使用某种ajax库。您可以使用fetch或类似axios的东西

另一种可行的方法是删除
e.preventDefault（）。现在这种方式有点棘手。通常，react应用程序与api不在同一台服务器上提供，在这种情况下，请求的url需要看起来更像这样。
http://localhost:5000/register
。或者，您可以告诉webpack dev server代理您的请求。即使这样，我个人也不确定这是否有效，因为我从未尝试过

需要注意的是，如果react应用程序不是从与api相同的位置提供的，或者如果wepback没有代理，那么您选择的任何一种方法都需要请求中的完整url。换句话说，您可能非常需要
http://localhost:5000/register

我的建议是使用我提到的ajax库

希望这能有所帮助。
使用Apisoup或axios，否则您必须执行老式的XMLHttpRequest调用在handleSubmit中编写此调用没有帮助
axios.post（'/register'）。然后（函数（响应）{console.log（响应）；}）。catch（函数（错误）{console.log（错误）;             }); 您的帖子没有发送任何内容。第二个参数应该是dataError：请求失败，状态代码为404。这就是我得到的结果。“/注册”与您的React应用程序在同一台服务器上吗？您可能需要放置完整的http路径否我使用两个独立的服务器，一个用于reactJs，另一个用于节点服务器。我应该把完整路径放在哪里？在上面写着“url”的地方，将“/注册”更改为完整路径