React Native使用Axios发送POST请求触发Network Error问题求助

问题概述 #

React Native中使用Axios向FastAPI后端发送POST请求时，仅返回无额外信息的[AxiosError: Network Error]，后端运行正常，切换IP/localhost后问题依旧。

错误日志 #

LOG  [AxiosError: Network Error]
LOG  [AxiosError: Network Error]
LOG  [AxiosError: Network Error]
LOG  [AxiosError: Network Error]

排查思路 #

• 协议与地址问题：React Native模拟器/真机对本地后端地址的解析规则和电脑不同，且未配置HTTPS时不能用https协议。
• 跨域限制：FastAPI默认未处理跨域请求，调试模式下React Native会被拦截。
• 端口与防火墙：后端端口可能被防火墙拦截，或未正确监听指定端口。
• 请求参数不匹配：FastAPI的Pydantic模型对参数格式有要求，参数不合法可能导致请求异常。
• 缺少调试日志：Axios默认日志不够详细，无法定位请求失败的具体环节。

解决方案 #

1. 修正请求地址与协议 #

根据运行环境替换正确的请求地址：

• Android模拟器：http://10.0.2.2:8080/prediction（10.0.2.2是Android模拟器映射电脑本地回环地址的特殊IP）
• iOS模拟器：http://localhost:8080/prediction
• 真机设备：http://[你的电脑局域网IP]:8080/prediction（例如192.168.1.100:8080，可通过ipconfig/ifconfig查看）

注意：如果后端未配置SSL证书，必须使用http协议，不能用https，否则会触发SSL连接错误。

2. 为FastAPI添加跨域中间件 #

FastAPI默认没有跨域支持，需添加CORSMiddleware允许跨域请求：

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

# 确保Item模型定义正确
class Item(BaseModel):
    id: str
    month: str
    day: str
    time: str

app = FastAPI()

# 配置CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 调试阶段用*，生产环境替换为具体允许的域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/prediction")
async def get_predict(data: Item):
    feature_list = [int(data.id), int(data.month), int(data.day), int(data.time)]
    pred_value = prediction(feature_list)
    return {"data": {"prediction": pred_value}}

if __name__ == '__main__':
    uvicorn.run(app, port=8080, host='0.0.0.0')

3. 验证后端可用性与端口 #

• 在电脑终端用curl测试后端是否正常响应：

  curl http://0.0.0.0:8080/prediction -X POST -H "Content-Type: application/json" -d '{"id":"1","month":"1","day":"1","time":"12"}'
  

  如果返回正常结果，说明后端没问题；如果无响应，检查端口是否被占用或防火墙是否拦截。
• 临时关闭电脑防火墙，或在防火墙规则中允许8080端口的入站请求。

4. 优化Axios请求配置（开启详细日志） #

修改Axios请求，添加调试日志以便定位问题：

const handleSubmit = () => {
    const params = {
      id,
      month,
      day,
      time,
    };

    axios.post("http://10.0.2.2:8080/prediction", params, {
        headers: {
            "Content-Type": "application/json",
        },
        validateStatus: (status) => true, // 允许所有状态码的响应
    })
    .then((res) => {
        console.log("完整响应:", res);
        const data = res.data.data;
        const parameters = JSON.stringify(params);
        const msg = `Parameters: ${parameters}\nPrediction: ${data.prediction}`;
        alert(msg);
    })
    .catch((error) => {
        // 打印详细错误信息
        console.log("错误详情:", {
            message: error.message,
            response: error.response?.data,
            request: error.request,
        });
    });
};

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