使用JavaScript与FastAPI搭建登录页面时POST请求报422错误求助

核心问题拆解 #

1. 422错误根源：mode: 'no-cors'会强制浏览器修改请求头，你设置的Content-Type: application/json会被替换为text/plain，FastAPI无法解析这种格式的请求体，直接触发参数验证失败的422错误。
2. 无法读取响应：no-cors模式下浏览器会限制JavaScript获取响应内容，哪怕后端返回了数据，前端也无法读取和打印。

具体修改步骤 #

1. 修正JavaScript代码 #

移除fetch配置中的mode: 'no-cors'，并优化响应处理逻辑：

const submitBtn = document.getElementById("submit");

function submitForm(event) {
  event.preventDefault();

  const nameInput = document.getElementById("fname").value;
  const passwdInput = document.getElementById("passwd").value;

  console.log({"first_name": nameInput, "password": passwdInput})
  const url = "http://192.168.1.5:800/login";

  fetch(url, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({first_name: nameInput, password: passwdInput}),
    // 移除no-cors模式，后端已配置CORS无需此设置
  })
  .then(response => {
    // 先判断响应状态，异常时解析错误信息
    if (!response.ok) {
      return response.json().then(err => Promise.reject(err));
    }
    return response.json();
  })
  .then(json => {
    console.log(json);
  })
  .catch(error => console.error("请求错误:", error));
}

submitBtn.addEventListener("click", submitForm);

2. 修正Python服务器代码 #

补充IPAddr变量的定义（否则服务器无法正常启动），同时规范类命名避免冲突：

from fastapi import FastAPI
import uvicorn
import socket
from pydantic import BaseModel
from fastapi.middleware.cors import CORSMiddleware

# 类名用大驼峰，避免和下面的login函数重名
class Login(BaseModel):
    first_name: str
    password: str

app = FastAPI()

origins = ["*"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/login")
def login(data: Login):
    print(data.first_name, data.password)
    return {"message": "Got It!"}

if __name__ == "__main__":
    # 补充IPAddr的定义，获取本机IP或直接用0.0.0.0允许所有IP访问
    IPAddr = socket.gethostbyname(socket.gethostname())
    # 也可以直接写host="0.0.0.0"
    uvicorn.run(app, host=IPAddr, port=800)

验证步骤 #

1. 启动Python服务器，访问http://192.168.1.5:8000/docs，用Swagger界面测试/login接口，确认接口能正常接收JSON参数并返回响应。
2. 运行前端页面，点击提交按钮，查看控制台是否能正常打印响应内容，同时检查网络请求的状态码是否为200。

内容的提问来源于stack exchange，提问作者deno83232