我已将 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 发布值时，代码如上。它给出了错误。错误来自发布功能。如果我做错了请纠正。

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

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

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

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

}

另外，对于 httpsSSL 问题意味着它需要安全证书（因为你不能在没有证书的情况下点击 https - 这是用于 encrypt-decrypt ）而对于 localhost 尝试 http 即使遇到错误尝试你的 ip 地址和端口（通常是 8080) 哪个应用程序在后端运行 在终端本身运行服务器时显示

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