mysql - react-express 应用程序中的 POST 请求的 URL 中显示了表单详细信息

Question

我正在制作用户身份验证服务器，但是在为新用户创建帐户时，表单中填写的详细信息在提交表单时在 URL 中可见，为什么？但是数据也被添加到数据库中。

我对该表单的反应前端是：

import {React,Component } from 'react';
import axios from 'axios'
import './form.css';

export default class signIn extends Component{
constructor(props){
super(props);
this.state={
 Name:'',
 Email:'',
 Password:'',
 ConfirmPassword:'',
 Response:''
}
this.handleClick = this.handleClick.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleClick(e){
this.setState({
[e.target.name]:e.target.value
})
}
handleSubmit(e){
axios.post('http://localhost:5000/createUser',{
 Name:this.state.Name,
 Email:this.state.Email,
 Password:this.state.Password,
 ConfirmPassword:this.state.ConfirmPassword
 }).then((res)=>{
   this.setState({
     Name:'',
     Email:'',
     Password:'',
     ConfirmPassword:'',
     Response:res.data
   })
  }).catch((err)=>{
  console.log(err);
  })
 }
 render(){
 return (
<div>
<h5 className="message">{this.state.Response}</h5>
<div className="contact">
<section className="cntct">
<form >
 <input type="text" name="Name" placeholder="Enter Your Full Name" onChange={this.handleClick} value={this.state.Name} required/>
 <input type="email" name="Email" placeholder="Email Address" onChange={this.handleClick} value={this.state.Email} required/>
 <input type="password" name="Password" placeholder="Password" onChange={this.handleClick} value={this.state.Password} required/>
  <input type="password" name="ConfirmPassword" placeholder="Confirm Password" onChange={this.handleClick} value={this.state.ConfirmPassword} required/>
  <button className="logIn" onClick={this.handleSubmit}>Create Account</button>
   </form>
  </section>
  </div>
  </div>
 )
 }
}

我的快递后端有以下代码：

const express = require('express')
const bodyParser = require('body-parser')
var sha1 = require('sha1');
var cors = require('cors')
const mySql = require('mysql');

const app = express();
const PORT = process.env.PORT||5000

app.use(cors())
app.use(bodyParser.json())

//Database
const pool = mySql.createPool({
connectionLimit:1000,
host:'localhost',
user:'root',
password:'',
database:'nodejsauthentication'
})
//Creating New Accounts
function createUser(req,res,next){
if(req.body.Name ==""||req.body.Email ==""||req.body.Password==""||req.body.ConfirmPassword==""){
    res.send("All fields are necessary");
 }
else if(req.body.Password ==""||req.body.ConfirmPassword==""){
    res.send("Passwords donot match")
 }
else{
pool.getConnection((err,connection)=>{
if(err){
throw err;
 }
 else{
 connection.query(`SELECT * FROM USERS WHERE email='${req.body.Email}'`,(err,result)=>{
 if(err){
 throw err;
  }
  else if(result ==""){
  connection.query(`INSERT INTO USERS (name,email,password) VALUES('${req.body.Name}','${req.body.Email}','${req.body.Password}')`,(err,result)=>{
   connection.release()
    if(err){
    throw err
     }
    else{
     res.send("Sucessfully Created a User")
      }
     })
     }
     else{
     res.send("An user already exist with that email")
     }
    })
   }
  })
 }
}
//MiddleWare for logging In.
function authenticate(req,res,next)
{
pool.getConnection((err,connection)=>{
if(err) throw err
    
 connection.query(`SELECT * FROM USERS WHERE email='${req.body.Email}'`,(err,result)=>{
 if(err) throw err
 if(result =="")
 res.send("No user is associated with that email")

  else{
  connection.query(`SELECT * FROM USERS WHERE email='${req.body.Email}' AND password='${req.body.Password}'`,(err,result)=>{
  connection.release();
    
  if(err) throw err
  else{
  if(result =="")
  {
  res.send("Email or password Didnot Match");
  }
  else{
  res.send("Congratulations!!!")
     }
    }
   })
 }
})
     
})
 }

//requests
app.get('/',(req,res)=>{
res.send("At '/'");
})

app.post('/home',authenticate,(req,res)=>{
console.log("Recieved a post request");
 })

app.post('/createUser',createUser,(req,res)=>{
console.log("creating new Users");
})

//listen to a server
app.listen(PORT,()=>{
console.log(`Server running sucessfully at port ${PORT}`)
})

在提交表单时，输入被添加到后端，但是我的 URL 更改为： http://localhost:3000/signIn?Name=harry&Email=gmail119%40gmail.com&Password=abcde12345&ConfirmPassword=abcde12345

标签： mysqlnode.jsreactjsexpresshttps