Я использую React и FastAPI и не могу добиться успешной связи между ними из-за проблемы, связанной с CORS. ⇐ Python

[Anonymous]

This is my react file:

import "../styles/login.css" import { useNavigate } from "react-router-dom"; import { useState } from "react" function Login({ setAuthToken }) { const [isLoading, setIsLoading] = useState(false); const [err, setErr] = useState(null); const navigate = useNavigate(); const handleLogin = () => { console.log("hello") try { console.log(1) // setIsLoading(true) // console.log(2) const payload = { "email": document.getElementById("login_email_input").value, "password": document.getElementById("login_password_input").value } console.log(payload) const response = fetch( process.env.REACT_APP_BACKEND_DOMAIN + "/users/login", { mode: "cors", method: "POST", body: payload, headers: { "Access-Control-Allow-Origin": "*", "Content-Type": "application/json", "Accept": "application/json" } } ); const data = response.json(); console.log(response) console.log(3) // setAuthToken(true) // console.log(4) // navigate("/sets") } catch (err) { console.log(5) console.log(err.response.data) setErr(err.response.data); } finally { setIsLoading(false); } } return ( Login Welcome back!
Email Password Sign In ) } export default Login;
This is my FastAPI application definition:

app.add_middleware( CORSMiddleware, allow_origins=[ "http://127.0.0.1:3000", "http://localhost:3000" ], allow_credentials=True, allow_methods=["*"], allow_headers=["*"], expose_headers=["*"] ) app.include_router(users_router, prefix="/users") This is my login function:

def login_user(auth_obj: AuthOM): record = mysql_get_user_by_email(auth_obj.email) if record is None: raise HTTPExceptionNative(404, "User not found") password_hash = record[2] is_congruent = _verify_password_against_hash(auth_obj.password, password_hash) if not is_congruent: raise HTTPExceptionNative(401, "Invalid password") And this is my object definition for the payload:

class AuthOM(BaseModel): email: str password: str I am receiving a 422 with no payload on the dev console in google: response payload

But receive a body with postman: body (confid params excluded)

I have tried unserialized and serialized bodies, modifying functions to be async (as I am largely unfamiliar with JS so not certain this is unrelated), and modifying the shown headers in every possible combination and it still does not work.


Источник: https://stackoverflow.com/questions/781 ... ication-be