FastAPI对接React应用时出现protocol未定义TypeError错误求助

核心错误原因 #

前端控制台的Cannot read properties of undefined (reading 'protocol')报错，本质是axios请求的URL未正确赋值：process.env.REACT_APP_API_URL未被正确加载或配置，导致URL为undefined，axios解析URL协议时触发异常。

同时后端代码存在语法和逻辑问题，即使URL修复也会导致请求失败，需一并处理。

前端修复步骤 #

1. 配置/修正API地址 #

• 在React项目根目录创建或修改.env文件，添加正确的API地址（注意变量必须以REACT_APP_开头才能被React识别）：

  REACT_APP_API_URL=http://localhost:8000/predict
  

• 若临时测试，可直接硬编码URL替代环境变量：

  url: "http://localhost:8000/predict",
  

2. 补充错误捕获逻辑 #

避免未处理的Promise拒绝，完善sendFile函数：

const sendFile = async () => {
  if (image) {
    setIsloading(true);
    let formData = new FormData();
    formData.append("file", selectedFile);
    try {
      let res = await axios({
        method: "post",
        url: process.env.REACT_APP_API_URL || "http://localhost:8000/predict",
        data: formData,
      });
      if (res.status === 200) {
        setData(res.data);
      }
    } catch (err) {
      console.error("请求失败:", err);
    } finally {
      setIsloading(false);
    }
  }
}

3. 验证变量加载 #

在控制台打印环境变量，确认是否正确加载：

console.log("API地址:", process.env.REACT_APP_API_URL);

后端代码修复（必做） #

1. 修复语法错误 #

删除MODEL定义行开头的多余-：

# 原错误代码
# -MODEL = tf.keras.models.load_model("../saved-models/3")
# 修正后
MODEL = tf.keras.models.load_model("../saved-models/3")

2. 补全函数返回值 #

read_file_as_image函数未返回处理后的图像数组，导致后续预测逻辑失败：

def read_file_as_image(data) -> np.ndarray:
    image = np.array(Image.open(BytesIO(data)))
    return image  # 新增返回语句

3. 匹配表单字段名 #

后端predict函数的参数名fil与前端formData的键file不匹配，修改参数名或指定字段名：

# 方式1：修改参数名
async def predict(file: UploadFile = File(...)):
    image = read_file_as_image(await file.read())
    # 后续代码...

# 方式2：指定表单字段名
async def predict(fil: UploadFile = File(..., name="file")):
    image = read_file_as_image(await fil.read())
    # 后续代码...

调试流程 #

1. 启动后端服务，访问http://localhost:8000/ping，确认返回hello，验证服务正常运行。
2. 用Postman测试/predict接口，上传图片确认返回正确的预测结果，排除后端问题。
3. 重新启动React项目，确保环境变量生效，再测试上传功能。

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