在mern堆栈的前端忘记了密码实现

Question

我创建了一个端点，忘记了mern堆栈中的密码。我在使用Thunder客户端发送忘记密码时为忘记密码创建了一个API，它将忘记密码链接发送到客户端以输入电子邮件id，但我想在忘记密码前端页面中实现这一点。我试过了，但不起作用

This is my thunder client screenshot Api work perfect

API工作截图

电子邮件接收屏幕截图单击此处查看图像

This is my Reset.js frontend file 

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify';

const Reset = () => {
const navigate = useNavigate()
const [email, setEmail] = useState({email: ""})
const postData = async (e) => {
e.preventDefault();
// eslint-disable-next-line
// if (!/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/.test(email)) {
//   toast.error("invalid email");
//   return
// }
const response = await fetch("http://localhost:5000/api/auth/reset-password", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email
})
}).then(res => res.json())
.then(data => {
if (data.error) {
toast.error("invalid data");
}
else {
toast.success("valid email")
navigate('./login')
}
}).catch(err => {
console.log(err);
})
}
return (
<div>
<form>
<div className="container" style={{ marginTop: "4.8rem", marginRight: "0px" }}>
<div className="col-md-6 col-lg-6 col-xl-4 offset-xl-1">
<div className="form-outline mb-4">
<label className="form-label" htmlFor="form3Example3"> Enter valid Email address</label>
<input type="email" id="email" value={email} onChange={(e)=>setEmail(e.target.value)} name="email" className="form-control form-control-lg" required
placeholder="Enter email address" style={{ backgroundColor: "#eaedf0" }} />
</div>
<div className="text-center text-lg-start mt-2">
<button type="submit" onClick={() => postData()} className="btn btn-outline-warning btn-lg">send link</button>
</div>
</div>
</div>
</form>
</div>
)
}
export default Reset

如有任何帮助，将不胜感激

Answer 1

我看到两个可能的问题：

1. 您正在以字符串形式发送正文。请尝试以json形式发送
2. 在雷霆客户端，我看到了3个标题。默认情况下有两个标头，所以我想您一定添加了一个额外的标头。检查是否需要添加它以获取