[Python] Get 422 error when trying to connect frontend to server

I am using fastapi-users library for authentication and authorization. Everything worked properly in swagger but when I am trying to connect backend and frontend i get such an error and such data: [HTTP/1.1 422 Unprocessable Entity 8ms]

request: {"username":"me@mail.com","password":"me"}


response: {"detail":[{"type":"missing","loc":["body","username"],"msg":"Field required","input":null},{"type":"missing","loc":["body","password"],"msg":"Field required","input":null}]}


I added CORS and MiddleWare, so it should be ok there.

origins = [
f"http://{FRONT_HOST}:{FRONT_PORT}",
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)


Here is my Login code:

import React, { useState } from 'react';

const Login = () => {
const [formData, setFormData] = useState({
username: '',
password: '',
});


const [error, setError] = useState('');
const [success, setSuccess] = useState('');

const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};

const handleSubmit = async (e) => {
e.preventDefault();

try {
const response = await fetch('http://localhost:8000/auth/jwt/login', {
method: "POST",
headers: {
'accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify({
username: formData.username,
password: formData.password})
});

if (!response.ok) {
throw new Error('Error during registration');
}

const data = await response.json();
setSuccess('Login successful!');
return <Redirect to='/account' />;
// Возможно, вам нужно будет перенаправить пользователя или обновить состояние приложения


} catch (err) {
setError(err.message);
}
};

return (
<form onSubmit={handleSubmit} style={{ maxWidth: '400px', margin: 'auto' }}>
<h2>Login</h2>
<div>
<label>Email:</label>
<input
type="email"
name="username"
value={formData.username}
onChange={handleChange}
required
/>
</div>
<div>
<label>Password:</label>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
required
/>
</div>
<button type="submit">Enter</button>
</form>
);
}

export default Login;


I read the github code of OAuth2PasswordRequestForm but still cannot understand what is the root of this problem.

I've tried different variations of:

• body parameter in fetch (JSON.stringify, and just formData)
• tried to add other optional parameters (grant_type, scope, client_id, client_secret)
• tried to use both "application/x-www-form-urlencoded" and "application/json" content types

Maybe I do not understand how forms and JSON are sent. I think there is a problem in sending data. I would be glad to find out how it should actually work because I am new to making fullstack.

Continue reading...