我实现了Django rest_auth来使用它作为我的应用程序的身份验证后端。这工作发现,当测试通过邮递员。但是,如果我现在从客户端发送登录帖子请求( returns ),它将返回
Success: {password: Array(1)}password: Array(1)0: "This field is required."length: 1[[Prototype]]: Array(0)[[Prototype]]: Object当我将传输的formData记录在submitHandler中时,我得到
{username: 'admin', password: 'test'}
password: "test"
username: "admin"在我看来还不错。我不知道如何调试这个程序,以及错误可能在哪里。
import {Fragment, useState, useReducer} from "react";
import {Link} from "react-router-dom";
// Initiate Form reducer
const formReducer = (state, event) => {
return {
...state,
[event.name]: event.value
}
};
const Login = () => {
const [formData, setFormData] = useReducer(formReducer, {});
const [logging, setLogging] = useState(false);
const submitHandler = event => {
console.log(formData)
event.preventDefault();
setLogging(true);
fetch('http://127.0.0.1:8000/api/user/auth/login/', {
method: 'POST',
body: JSON.stringify({formData}),
headers: {'Content-Type': 'application/json'},
})
.then(res => res.json())
.then(result => {
console.log('Success:', result);
})
};
return (
<Fragment>
<form onSubmit={submitHandler}>
<div className="text-lg text-sx-purple-dark text-center mb-4">Login to your Salaryx Account</div>
<div>
<div className="relative top-3 left-4 pl-2 pr-2 text-sx-purple-dark-soft bg-sx-white-plain w-max">Username*</div>
<input
type="text"
className="w-full mb-4 h-auto text-sm rounded md indent-2 outline-0 border-sx-pink border-2 focus:border-2 focus:border-sx-purple border-solid h-12"
autoCapitalize="none"
autoComplete="username"
autoFocus={true}
name="username"
required={true}
onChange={changeHandler}
>
</input>
</div>
<div>
<div className="relative top-3 left-4 pl-2 pr-2 text-sx-purple-dark-soft bg-sx-white-plain w-max">Password*</div>
<input
type="password"
className="w-full mb-4 h-auto text-sx-purple-dark-soft text-sm rounded md indent-2 outline-0 border-sx-pink border-2 focus:border-2 focus:border-sx-purple border-solid h-12"
autoComplete="current-password"
name="password"
required={true}
onChange={changeHandler}
>
</input>
<Link className="" to="/auth/password_change/">
<div className="text-center text-xs opacity-40 flex justify-end relative -top-4">Forgot Password?</div>
</Link>
</div>
<button className="bg-sx-pink w-full p-2 rounded hover:opacity-70" type="submit">Log In</button>
<Link className="" to="/auth/signup">
<div className="opacity-40 mt-2 text-center text-sm">No account yet? Sign Up!</div>
</Link>
</form>
</Fragment>
)
}
export default Login发布于 2022-04-08 06:18:27
您正在这里的参数中创建一个新对象:
body: JSON.stringify({formData}),
其结果是body是:
{"obj":{"username":"username","password":"password"}}去掉花括号,这样会有帮助。
https://stackoverflow.com/questions/71761596
复制相似问题