FastAPI:React 本机前端在身份验证流期间给出 422 错误

Question

My react native code：

const signin =
(dispatch) =>
async ({ username, password }) => {
try {
console.log(username, password);
const response = await tracker.post(
"/login",
(data = { username, password }),
(headers = {
"content-type": "application/x-www-form-urlencoded",
})
);
await AsyncStorage.setItem("token", response.data.token);
dispatch({ type: "signin", payload: response.data.token });
console.log(response.data.token);
} catch (err) {
console.log(err);
dispatch({
type: "error",
payload: "This is an error, start debugging",
});
}
};

对 FastAPI 后端的 curl 请求：

curl -X 'POST'   'https://fastest.herokuapp.com/login/'    -H 'accept: application/json'    -H 'Content-Type: application/x-www-form-urlencoded'    -d 'grant_type=&username={email}&password={password}&scope=&client_id=&client_secret=

每当我尝试创建新用户或使用现有用户登录时，我都会收到以下错误：

[AxiosError: Request failed with status code 422]

有没有更好的方法可以使用 curl 发送 POST 请求以使用 axios 进行注册或登录？

现在，我知道这是互联网上一个有据可查的错误，但是，不知何故，我无法找到错误并对其进行调试。关于我做错了什么的任何反馈？

编辑： 快速 API 端点代码：

@router.post("/",response_model=schemas.Token)
def getLogin(user_Credentials:OAuth2PasswordRequestForm=Depends(),db: Session=Depends(database.get_db)):
user = db.query(models.User).filter(models.User.email == user_Credentials.username).first()
if not user:
raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail=f"wrong credentials")
if not utils.verify(user_Credentials.password,user.password):
raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail=f"wrong credentials")
access_token = oauth2.create_access_token(data={"user_id": user.id})
return {"access_token":access_token, "token_type":"bearer"}

对于完整代码：

后端快速API：这里 前端反应原生：这里

错误已更改

根据 https://axios-http.com/docs/urlencoded 添加qs.stringify()并更新代码后，如下所示：

const signin =
(dispatch) =>
async ({ username, password }) => {
try {
console.log(username, password);
const response = await tracker({
method: "post",
url: "/login",
data: qs.stringify({
username: username,
password: password,
}),
headers: {
"content-type": "application/x-www-form-urlencoded;charset=utf-8",
},
});
console.log(response.data.token);
await AsyncStorage.setItem("token", response.data.token);
dispatch({ type: "signin", payload: response.data.token });
} catch (err) {
console.log(err);
dispatch({
type: "error",
payload: "Start debuggin",
});
}
};

现在出现的问题是令牌是undefined，但是当我在/docs上输入相同的凭据时，我得到了令牌。

最终更新：令牌访问的端点出错

Answer 1

请尝试将您的身份验证数据作为 FormData 发送。

let bodyFormData = new FormData();
bodyFormData.append("username", "value");
bodyFormData.append("password", "value");

然后像您一样发送它：

const response = await tracker.post(
"/login",
(data = bodyFormData),
(headers = {
"content-type": "application/x-www-form-urlencoded",
})
);

应该提到的是，我对 react-native 没有做太多事情，但我想这对你的情况有用。

Answer 2

根据JavaScript的文档：

尚未赋值的变量的类型为undefined。 方法或语句还返回undefined如果变量 正在评估没有分配的值。函数返回undefined是否返回值。

在您的情况下，您尝试从 FastAPI 后端返回的 JSON 回复中检索属性，即token。但是，该 JSON 对象中不存在此类属性。您的 API 端点返回"access_token": access_token，因此，您应该改用response.data.access_token。

此外，为了将来参考，状态代码为422(unprocessable entity) 的响应将具有指定错误消息的响应正文，准确告知请求的哪个部分丢失或与预期格式不匹配。这将指导您修复代码中的错误。也看到这个答案。