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

Question

嗨，我已经将 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;

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

Answer 1

您可以删除 双引号，因为您在 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>
          );
        }

Answer 2

首先，尝试post问题本身的错误

您的代码对于简单的表单提交来说似乎相当复杂

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

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

 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 }));

}

此外，对于 httpsSSL 问题意味着它需要安全证书（因为如果没有它的证书就无法访问 https - 这是 encrypt-decrypt ），而对于本地主机尝试 http 即使得到错误尝试您的 ip 地址和端口（通常是 8080），应用程序在后端运行 显示运行终端本身的服务器

for pc ip address -> go to cmd-> type ipconfig

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

i have integrated nodejs backend to reactjs front end

integration

node.js

reactjs

webapi