如何纠正 ReactJS / NodeJS / MySQL 中的这个错误？

Question

Here is my App.js file (client side):

import "./App.css";
import { useState } from "react";
import Axios from "axios";

function App() {
  const [usernameReg, setUsernameReg] = useState("")
  const [passwordReg, setPasswordReg] = useState("")

  const register = () => {
    Axios.post("https://localhost3001/register", {
      username: usernameReg,
      password:passwordReg,
    }).then((response) => {
      console.log(response);
    });
  };

  return (
    <div className="App">
      <div className="information">
        <h1>Register</h1>
        <label>Name:</label>
        <input
          type="text"
          onChange={(e) => {
            setUsernameReg(e.target.value);
          }}
        />
        <label>Password:</label>
        <input
          type="text"
          onChange={(e) => {
            setPasswordReg(e.target.value);
          }}
        />
        <button onClick={register}>Register</button>
      </div>
      <div className="login">
        <h1>Login</h1>
        <label>Name:</label>
        <input
          type="text"
        />
        <label>Password:</label>
        <input
          type="text"
        />
        <button>Login</button>
      </div>
    </div>
  );
}

export default App;

and this is my index.js file (server side):

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

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

const db = mysql.createConnection({
  user: "x",
  host: "here is my db IP",
  password: "x",
  database: "x",
});

db.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
});

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

  const username = req.body.username;
  const password = req.body.password;

  db.query(
    "INSERT INTO test (username, password) VALUES (?,?)",
    [username, password],
    (err, result) => {
        console.log(err);
    }
  );
});


app.listen(3001, () => {
  console.log("Yey, your server is running on port 3001");
});

When I start my React app, no problem into the console, same when I start my index.js (console prints "Yey, your server is running on port 3001" and "Connected." so there is no problem with the db connection), But when I press the register button: there is no data sent to my DB and I have these messages in the Chrome DevTools :

POST https://localhost3001/register net::ERR_CONNECTION_TIMED_OUT

and

Uncaught (in promise) Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:84)

I have also in these DevTool (network window):

Failed to load response data

What can I do to fix that please?

Answer 1

use http://localhost:3001/register . Not https://localhost3001/register

From time to time we will make such silly mistakes:vvvv

Answer 2

You should change this line:

Axios.post("https://localhost3001/register", {

to this other

Axios.post("https://localhost:3001/register", {

You are missing a : to separate the url part (localhost) from the port 3001