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

【问题标题】：How can I correct this error in ReactJS / NodeJS / MySQL?如何纠正 ReactJS / NodeJS / MySQL 中的这个错误？
【发布时间】：2021-05-18 00:59:26
【问题描述】：

这是我的 App.js 文件（客户端）：

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;

这是我的 index.js 文件（服务器端）：

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

当我启动我的 React 应用程序时，控制台没有问题，当我启动我的 index.js 时也是如此（控制台打印“是的，您的服务器正在端口 3001 上运行”和“已连接！”所以没有问题数据库连接）。但是当我按下注册按钮时，没有数据发送到我的数据库，我在 Chrome DevTools 中有这些消息：

POST https://localhost3001/注册网络::ERR_CONNECTION_TIMED_OUT

和

未捕获（承诺中）错误：网络错误在 createError (createError.js:16) 在 XMLHttpRequest.handleError (xhr.js:84)

我也有这些 DevTool（网络窗口）：

加载响应数据失败

请问我能做些什么来解决这个问题？

【问题讨论】：

localhost3001 -> localhost:3001 ?

标签： mysql node.js reactjs

【解决方案1】：

你应该改变这一行：

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

给别人

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

您缺少一个 : 来将 url 部分 (localhost) 与端口 3001 分开

【讨论】：

【解决方案2】：

使用http://localhost:3001/register。不是https://localhost3001/register

有时我们会犯这种愚蠢的错误：vvvv

【讨论】：