Postman/Swagger正常的FastAPI POST请求在React Native中报422错误排查

核心问题1：请求Content-Type设置错误 #

你把请求头的Content-Type设为了application/text，但实际发送的是JSON格式的请求体，FastAPI无法正确解析非JSON格式的请求数据，直接返回422错误。

修复方法：将Content-Type修改为application/json，同时删掉前端请求里多余的CORS响应头（Access-Control-Allow-Origin这类头是后端返回给前端的，前端请求时添加没有意义）。

修正后的请求头：

const headers = {
  'Content-Type': 'application/json',
}

核心问题2：使用mode: 'no-cors'限制了请求 #

这个模式会让fetch进入受限状态：

• 无法读取响应的状态码和内容
• 不能发送除简单头之外的自定义请求头
• 即便后端返回数据，前端也拿不到有效响应

修复方法：直接删掉mode: 'no-cors'配置，使用默认的cors模式即可。

核心问题3：后端CORS配置未生效 #

你的BACKEND_CORS_ORIGINS是空数组，导致CORSMiddleware根本没被添加到FastAPI应用中。React Native的跨域请求会触发预检，必须配置正确的允许源才能通过。

修复方法：

1. 根据测试环境添加允许的源：安卓模拟器用http://10.0.2.2:8000，iOS模拟器用http://localhost:8000，真机测试填电脑的局域网IP（比如http://192.168.1.100:8000）。
2. 修改配置代码：

BACKEND_CORS_ORIGINS: List[AnyHttpUrl] = [
    "http://10.0.2.2:8000",  # 安卓模拟器
    "http://localhost:8000",  # iOS模拟器
    "http://192.168.1.100:8000"  # 真机测试替换为你的局域网IP
]

这样CORSMiddleware才会生效，允许React Native的跨域请求。

完整修正后的React Native请求代码 #

const onLoginPressed = async () => {
    try {
        const headers = {
            'Content-Type': 'application/json',
        }
        const response = await fetch("http://127.0.0.1:8000/***/v1/***/***-token", {
            method: "POST",
            withCredentials: true,
            headers: headers,
            body: JSON.stringify({
                username: '***@**.com',
                password: '****',
            }),
        })
        
        // 先检查响应状态，方便排查错误
        if (!response.ok) {
            const errorDetail = await response.text();
            console.error('请求失败:', response.status, errorDetail);
            return;
        }
        
        const json = await response.json();
        console.log(json);
    } catch (error) {
        console.error('网络错误:', error);
    }
}

额外提示 #

• 真机测试时不要用127.0.0.1，换成电脑的局域网IP，否则真机无法访问本地后端服务。
• 可以查看FastAPI的控制台日志，里面会明确显示422错误的具体原因（比如哪个字段缺失或格式错误），更便于排查。

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