来自我的反应前端的数据没有进入 mysql 数据库

Question

我有一个反应前端、节点服务器和 MySQL 数据库。 我正在使用快递服务器和 Axios 来发送我的帖子请求。 该代码似乎没有错误，在 chrome 的控制台和网络中也是如此。 但是，没有数据进入我的数据库。 我将非常感谢您的帮助。 这是我的代码；

客户

import React, { useState } from 'react';
import './register.css';
import {Link} from 'react-router-dom';
import Image from '../../assets/Image.png';
import Axios from 'axios';

const Register = () => {

  const [uploadReq, setUploadReq] = useState('')
  const [usernameReq, setUsernameReq] = useState('')
  const [fullnameReq, setFullnameReq] = useState('')
  const [emailReq, setEmailReq] = useState('')
  const [passwordReq, setPasswordReq] = useState('')

  const registration = () => {
    Axios.post("http://localhost3000/register",{
      upload: uploadReq,  
      username: usernameReq,
      fullname: fullnameReq,
      email: emailReq,
      password: passwordReq,
    }).then((response) => {
     console.log(response);
    });

  };

  return (
    <div className='register section__padding'>
      <div className="register-container">
        <h1>register</h1>
        <p className='upload-file'>Upload Profile pic</p>
        <div className="upload-img-show">
          <img src={Image} alt="banner" />
          <p>browse media on your device</p>
        </div>
        <form className='register-writeForm' autoComplete='off' >
          <div className="register-formGroup">
            <label>Upload</label>
            <input type="file" className='custom-file-input'
             onChange={(e) => {
              setUploadReq(e.target.value);  
            }}
          />
          </div>
          <div className="register-formGroup">
            <label>Full Name</label>
            <input type="text" placeholder='Name' 
            onChange={(e) => {
            setFullnameReq(e.target.value);  
          }}
            />
          </div>
          <div className="register-formGroup">
            <label>Username</label>
            <input type="text" onChange={(e) => {
              setUsernameReq(e.target.value);  
            }}placeholder='Username'  />
          </div>
          <div className="register-formGroup">
            <label>Email</label>
            <input type="email" placeholder='Email' 
            onChange={(e) => {
            setEmailReq(e.target.value);  
            }}
            />
          </div>
          <div className="register-formGroup">
            <label>Password</label>
            <input type="text" onChange={(e) => {
              setPasswordReq(e.target.value);  
            }} placeholder='Password'   />
          </div>
         <div className="register-button">
          <button className='register-writeButton' onClick={registration}>register</button>
          <Link to="/login">
            <button className='reg-login-writeButton' >Login</button>
          </Link>
         </div>
        </form>
      </div>
    </div>
   )
};

export default Register;

服务器

const express = require("express");
const app = express();
const mysql = require("mysql");
const cors = require("cors"); 

app.use(express.json());
app.use(cors());

const db = mysql.createPool({
    
    host: "localhost",
    user: "root",
    password: "xyz",
    database: "nftdatabase",
 });

 app.post('/register', (req, res) => {

    const upload = req.body.upload
    const Fullname = req.body.fullname
    const Username = req.body.username
    const Email = req.body.email
    const Password = req.body.password

    db.query("INSERT INTO user (upload, fullname, username, email, password) VALUES (?,?,?,?,?)", 
    [upload, Fullname, Username, Email, Password],
    (err, result) => {
        console.log(err);
    });

 });

app.listen(3001, () => {

    console.log("running on port 3001");
});

Answer 1

您的服务器在 PORT 3001 上运行，而您从客户端调用 PORT 3000 上的 API 端点。您是否在客户端使用过代理。 您是否在 package.json 文件中添加了这一行？

"proxy": "http://localhost:3001"