React-Express用户认证服务中创建新用户时表单数据显示在URL的原因咨询

你遇到的这个问题，核心是表单的默认提交行为没有被阻止。HTML里的<form>标签默认使用GET方法提交数据，当你点击表单内的按钮（默认类型是submit）时，浏览器会自动触发这个默认行为，把表单字段拼接到URL里——这就是你看到URL变成长串的原因。

虽然你通过axios.post成功发送了POST请求并把数据存入了数据库，但浏览器的默认GET提交动作也同时执行了，所以出现了“数据存成功但URL带参数”的情况。

有两种简单的方法可以解决这个问题：

方法一：阻止默认提交行为 #

在你的handleSubmit函数开头加上e.preventDefault()，这样就能阻止浏览器的默认表单提交动作：

handleSubmit(e){
  // 阻止表单默认提交行为
  e.preventDefault();
  axios.post('http://localhost:5000/createUser',{
    Name:this.state.Name,
    Email:this.state.Email,
    Password:this.state.Password,
    ConfirmPassword:this.state.ConfirmPassword
  }).then((res)=>{
    // ... 现有代码
  }).catch((err)=>{
    console.log(err);
  })
}

方法二：修改按钮类型 #

把按钮的type设置为button，因为<button>在表单内默认是submit类型，改成button后就不会触发表单的默认提交了：

<button className="logIn" type="button" onClick={this.handleSubmit}>Create Account</button>

除了上面的问题，你的代码还有两个需要紧急修复的点：

• SQL注入风险：你直接把req.body的内容拼接到SQL语句里，这是非常危险的操作，攻击者可以通过构造恶意输入来篡改你的数据库。应该使用MySQL的参数化查询，比如：

// 替换插入用户的SQL语句
connection.query('INSERT INTO USERS (name,email,password) VALUES(?,?,?)', 
  [req.body.Name, req.body.Email, hashedPassword], 
  (err,result)=>{
    // ... 现有代码
  }
)

• 密码未加密存储：你引入了sha1但没有实际使用，明文存储密码是严重的安全问题。应该把密码哈希后再存入数据库：

// 在createUser函数里，存储密码前先哈希
const hashedPassword = sha1(req.body.Password);
// 然后把hashedPassword存入数据库

内容的提问来源于stack exchange，提问作者IcanCode