mysql 如何将Axios发布到数据库?

qaxu7uf2  于 2023-10-15  发布在  Mysql
关注(0)|答案(2)|浏览(122)

我试图使一个登录系统,这是我的项目与React的一部分,表达,MySQL和Axios,但我一直得到这个错误- Uncaught(in promise)Error:请求中止
服务器端:

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

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

const db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "cool12345",
    database: "users"
})

db.connect(err => {
    if(err){
        return err;
    }
})

console.log(db)

app.post("/register", (req, res) => {
    const username = req.body.username;
    const password = req.body.password;
    const email = req.body.email;

    db.query("INSERT INTO teachers (name, email, password) VALUES (?,?)", [username, email, password], (error, result) => {
        console.log(error)
    })
 
    db.query("INSERT INTO teachers (name, email, password) VALUES ('test', 'test2', 'test3')")
})
 

app.listen(4000, () => {
    console.log("Listening on port 4000")
})

客户端:

import React, { useState } from 'react'
import "../styling/SignUp.css";
import { useHistory } from "react-router-dom"
import Axios from "axios";


function SignUp() {
    const [usernameReg, setUsernameReg] = useState("")
    const [emailReg, setEmailReg] = useState("")
    const [passwordReg, setPasswordReg] = useState("")

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

客户端的函数返回一个表单,但是有太多的代码,所以我把它排除在这个问题之外。注册按钮有一个onClick处理函数,它运行注册。

w80xi6nr

w80xi6nr1#

我怀疑你的localhost有ssl证书
尝试:

Axios.post("http://localhost:4000/register", {username: usernameReg, email:emailReg, password: passwordReg}).then((response) => {
            console.log(response)
})

HTTP而不是HTTPS
编辑:我太匆忙了,没有下结论。你传递给axios的对象是什么?我觉得应该是:

Axios.post("http://localhost:4000/register", {
    data: {
        username: usernameReg, 
        email:emailReg, 
        password: passwordReg
    }
}).then((response) => {
        console.log(response)
}).catch(err => console.log(err))

您也可以捕获错误。(所以不会是“未捕获”)

k2arahey

k2arahey2#

Axios.post("http://localhost:4000/register", headers: {
    'Content-Type': 'application/json',
   }, {
 data: {
    username: usernameReg, 
    email:emailReg, 
    password: passwordReg
 }
}).then((response) => {
    console.log(response)
}).catch(err => console.log(err))

在使用post请求时,尝试设置名为Content-Type/application/json的头文件。application/json用于通过请求传输json数据。

相关问题