使用 react js 重置密码（显示错误：加载资源失败，服务器响应状态为 400）

Question

   import {  useState } from 'react';
   import { useSearchParams } from 'react-router-dom';
   import api from '../contexts/BaseUrl';

function ResetPassword(){
const [searchParams] = useSearchParams();
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [success, setSuccess] = useState(null);

const [err, setErrMsg] = useState("")

const email = searchParams.get('email');
const token = searchParams.get('token');


const handleSubmit = async (e) => {
    e.preventDefault();
    try{
        const response = await api.post(
            '/api/accounts/reset-password', 
            JSON.stringify({password, confirmPassword, email, token}),
            {
                headers:{
                    "Accept" : "application/json",
                    "Content-Type" : "application/json",
                }
            });
     
        setPassword("");
        setConfirmPassword("");
        setSuccess(true);
    }catch(err){          
        setPassword("");
        setConfirmPassword("");
        setSuccess(false);
        if(!err?.response){
            setErrMsg('No Server Response')
        }else{
            setErrMsg('Failed changing password!');
        }
    }
    
}

return (  
     <div>
         <div>Email : {email}</div>
         <button onClick={() => console.log(tokenGet)}>Token</button>
         
                <form className="userContent2" 
                    onSubmit={handleSubmit}
                >
                

                <label>New Password: </label>
                <input
                    type="password"
                    pattern = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
                    value = {password}
                    required
                    onChange={event => {
                        setPassword(event.target.value);
                     
                        if (event.target?.validity?.patternMismatch) {
                            event.target?.setCustomValidity('Min - 8 chars,1 Uppercase, 1 Lowercase, 1 number, 1 special character ');
                        } else {
                            event.target?.setCustomValidity('');
                        }
                    }}
                />
                <label>Confirm New Password: </label>
                <input
                    type="password"
                    pattern = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
                    value = {confirmPassword}
                    required
                    onChange={event => {
                        setConfirmPassword(event.target.value);
                       
                        if (event.target?.value !== password) {
                            event.target?.setCustomValidity('Password doesn\'t match');
                        } else {
                            event.target?.setCustomValidity('');
                        }
                    }}
                />
                <button className='userButton'>Save</button>

                {!success && <div className='error'>{err}</div>}
                {success && <div className='success'>Password Successfully Changed!</div>}
            </form>
        
    </div>
    
 );}


 export default ResetPassword;

我知道我在客户端犯了错误。 这是控制台错误：

Failed to load resource: the server responded with a status of 400 (Bad Request)

此处，用户提供 email，然后已将 email 发送给用户，其中包含重置密码的链接。 该重置链接具有令牌和用户的 email。 使用该令牌和 email 我将其传递给我的发布请求。 我错过了什么？

Answer 1

我猜JSON.stringify的问题

JSON.stringify({password, confirmPassword, email, token})

如果您已经在使用 Axios，请不要对任何内容进行字符串化。 Axios 为您完成这项工作。 将所有这些值作为单个 javascript object 发送。

例子：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

更多信息： Axios 文档