Node.js 我已经将nodejs后端集成到reactjs前端

嗨，我已经将nodejs后端集成到reactjs前端。我已经这样做了。但它显示出错误。我是新手，请帮忙

function Register() {

 const [data, setData] = useState({
    name: "",
    phone: "",
    password: "",
    confirmpassword: "",
  });

const InputEvent = (event) => {
    const { name, value } = event.target;

setData((preVal) => {
      return {
        ...preVal,
        [name]: value,
      };
    });
  };

const formSubmit = (e) => {
    e.preventDefault();
    const registered = {
      name: "data.name",
      phone: "data.phone",
      password: "data.password",
    };
    
    const isValid = formValidation();
    if (isValid) {
      //if form is valid, route
      axios
        .post(`https://localhost:5000/api/v1/auth/register/`, registered)
        .then((res) => {
          console.log(res);
          console.log(res.data);
        })

        .catch((err) => {
          console.log(err);
        });

      history.push("/myvehicles" );
    }
  };

return (
    <div className="signup__container">

      <form className="register__form" onSubmit={formSubmit}>
        <h5 className="h5__form"> Name</h5>
        <input
          type="text"
          placeholder="पुरा नाम लेख्नुहोस्"
          name="name"
          value={data.name}
          onChange={InputEvent}
        />
           
          );
        })}
        <h5 className="h5__form"> phone </h5>
        <input
          type="text"
          placeholder="फोन लेख्नुहोस्"
          name="phone"
          value={data.phone}
          onChange={InputEvent}
        />

       
          );
        })}
        <h5 className="h5__form"> Password </h5>
        <input
          type="Password"
          placeholder="पासवर्ड लेख्नुहोस्s"
          name="password"
          value={data.password}
          onChange={InputEvent}
        />

       
          );
        })}
        <h5 className="h5__form"> Confirm Password </h5>
        <input
          type="Password"
          placeholder="पुन: पासवर्ड लेख्नुहोस्"
          name="confirmpassword"
          value={data.confirmpassword}
          onChange={InputEvent}
        />

      
          );
        })}
        <p>
          <button type="submit" className="signup__registerButton">
            Register Now
          </button>
        </p>
      </form>
    </div>
  );
}

export default Register;

函数寄存器（）{
const[data，setData]=useState({
姓名：“，
电话：“，
密码：“”，
确认密码：“”，
});
常量输入事件=（事件）=>{
常量{name，value}=event.target；
setData（（preVal）=>{
返回{
…普雷瓦尔，
[名称]：值，
};
});
};
const formSubmit=（e）=>{
e、 预防默认值（）；
注册常数={
名称：“data.name”，
电话：“data.phone”，
密码：“data.password”，
};
const isValid=formValidation（）；
如果（有效）{
//如果表格有效，则发送
axios
.邮政(`https://localhost:5000/api/v1/auth/register/`，已注册）
。然后（（res）=>{
控制台日志（res）；
console.log（res.data）；
})
.catch（（错误）=>{
控制台日志（err）；
});
历史。推送（“/myvehicles”）；
}
};
返回(
名称
);
})}
电话
);
})}
密码
);
})}
确认密码
);
})}

现在注册

);
}
导出默认寄存器；

---

当我从UI运行后端和前端服务器以及post值时，代码如上所述。它给出了错误。错误来自post函数。如果我做错了，请更正。

您可以删除双引号，因为您在api url中传递了错误的参数和http而不是https

    import React, { useState } from "react";
    import "./styles.css";
        
        export default function App() {
          const [data, setData] = useState({
            name: "",
            phone: "",
            password: "",
            confirmpassword: ""
          });
        
          const InputEvent = (event) => {
            const { name, value } = event.target;
        
            setData((preVal) => {
              return {
                ...preVal,
                [name]: value
              };
            });
          };
        
          const formSubmit = (e) => {
            e.preventDefault();
            const registered = {
              name: data.name,
              phone: data.phone,
              password: data.password
            };
        
            const isValid = formValidation();
            if (isValid) {
              //if form is valid, route
              axios
                .post(`http://localhost:5000/api/v1/auth/register/`, registered)
                .then((res) => {
                  console.log(res);
                  console.log(res.data);
                })
        
                .catch((err) => {
                  console.log(err);
                });
        
              // history.push("/myvehicles" );
            }
          };
        
          return (
            <div className="signup__container">
              <form className="register__form" onSubmit={formSubmit}>
                <h5 className="h5__form"> Name</h5>
                <input
                  type="text"
                  placeholder="पुरा नाम लेख्नुहोस्"
                  name="name"
                  value={data.name}
                  onChange={InputEvent}
                />
                <h5 className="h5__form"> phone </h5>
                <input
                  type="text"
                  placeholder="फोन लेख्नुहोस्"
                  name="phone"
                  value={data.phone}
                  onChange={InputEvent}
                />
                <h5 className="h5__form"> Password </h5>
                <input
                  type="Password"
                  placeholder="पासवर्ड लेख्नुहोस्s"
                  name="password"
                  value={data.password}
                  onChange={InputEvent}
                />
                <h5 className="h5__form"> Confirm Password </h5>
                <input
                  type="Password"
                  placeholder="पुन: पासवर्ड लेख्नुहोस्"
                  name="confirmpassword"
                  value={data.confirmpassword}
                  onChange={InputEvent}
                />
                <p>
                  <button type="submit" className="signup__registerButton">
                    Register Now
                  </button>
                </p>
              </form>
            </div>
          );
        }

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[data，setData]=useState({
姓名：“，
电话：“，
密码：“”，
确认密码：“
});
常量输入事件=（事件）=>{
常量{name，value}=event.target；
setData（（preVal）=>{
返回{
…普雷瓦尔，
[名称]：值
};
});
};
const formSubmit=（e）=>{
e、 预防默认值（）；
注册常数={
name:data.name，
电话：data.phone，
密码：data.password
};
const isValid=formValidation（）；
如果（有效）{
//如果表格有效，则发送
axios
.邮政(`http://localhost:5000/api/v1/auth/register/`，已注册）
。然后（（res）=>{
控制台日志（res）；
console.log（res.data）；
})
.catch（（错误）=>{
控制台日志（err）；
});
//历史。推送（“/myvehicles”）；
}
};
返回(
名称
电话
密码
确认密码

现在注册

);
}

首先，尝试在问题本身中发布错误

仅仅提交一个简单的表单，您的代码就显得相当复杂

 const registered = {
     name: data.name,
     phone: data.phone,
     password: data.password,
   };

这里data.name是字符串 对于400个错误请求，请检查节点应用程序是否定义了任何头或任何特定格式，类似于需要发送的内容

 const article = { title: 'React POST Request Example' };
const headers = { 
    'Authorization': 'Bearer my-token',
    'Content-Type': 'application/json'
};
axios.post('https://reqres.in/api/articles', article, { headers })
    .then(response => this.setState({ articleId: response.data.id }));

}

另外，对于https

SSL

issue，意味着它需要安全的证书（因为没有证书，您无法访问https-这是用于加密-解密的），而对于localhost，即使出现错误，也可以尝试http。请尝试您的ip地址和端口（通常是8080），在后端运行应用程序 在终端本身上运行服务器时显示

---

“it gives error”什么错误？您可以删除双引号，因为您在url中传递了错误的参数和http而不是https。const registed={name:data.name，phone:data.phone，password:data.password}；在URL中尝试http而不是https。有3个错误！它们是：警告：失败的道具类型：道具

到

在

链接中标记为所需，但其值为
未定义
。警告：使用
defaultValue
或
value
道具打开，而不是将
selected
设置为打开。POST net:：ERR_SSL_PROTOCOL_ERROR xhr.js:177如果我使用http，它会给出以下错误：xhr.js:177 POST 400（错误请求）错误：请求失败，状态代码400 register.js位于createError（createError.js:16）位于settle（settle.js:17）位于XMLHttpRequest.handleLoad（xhr.js:62）你在哪里更改代码的？看起来是一样的！我改变了两件事，第一件是注册的const对象，第二件是将url https更改为http。这对你有效。我没有在你的代码中获得链接。你能与Link共享你的代码吗
for pc ip address -> go to cmd-> type ipconfig