Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'protocol')

enter image description hereI'm learning and following a Deep leaning tutorial that uses FastApi to serve prediction models to a Reactjs App.

It returns a console log error: Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'protocol')

Api runs: "http://localhost:8000" myApp runs: "http://localhost:3000"

**Here is the react code to make the API request

from fastapi import FastAPI, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware
import uvicorn 
import numpy as np
from io import BytesIO
from PIL import Image
import tensorflow as tf
 
app = FastAPI()

origins = [
    "http://localhost", 
    "http://localhost:3000",
]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"], 
    allow_headers=["*"],
-MODEL = tf.keras.models.load_model("../saved-models/3")
CLASS_NAMES = ["Early Blight", "Late Blight", "Healthy"]

@app.get("/ping")
async def ping():
    return "hello"

def read_file_as_image(data) -> np.ndarray:
    image = np.array(Image.open(BytesIO(data)))  

**Here is the react code to make the API request **

import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { Paper, CardActionArea, CardMedia, Grid, TableContainer, Table, TableBody, TableHead, TableRow, TableCell, Button, CircularProgress } from "@material-ui/core";
import cblogo from "./cblogo.PNG";
import image from "./bg.png";
import { DropzoneArea } from 'material-ui-dropzone';
import { common } from '@material-ui/core/colors';
import Clear from '@material-ui/icons/Clear';


export const ImageUpload = () => {
  const classes = useStyles();
  const [selectedFile, setSelectedFile] = useState();
  const [preview, setPreview] = useState();
  const [data, setData] = useState();
  const [image, setImage] = useState(false);
  const [isLoading, setIsloading] = useState(false);
  let confidence = 0;

  const sendFile = async () => {
    if (image) {
      let formData = new FormData();
      formData.append("file", selectedFile);
        let res = await axios({                         #here make the API request
        method: "post",
        url: process.env.REACT_APP_API_URL,
        data: formData,
      });
      if (res.status === 200) {
        setData(res.data);
      }
      setIsloading(false);
    }
  }   
    return image

@app.post("/predict")                        #Here is the prediction method
async def predict(fil: UploadFile = File(...)):
    image = read_file_as_image(await fil.read())
    img_batch = np.expand_dims(image, 0)             
    predictions = MODEL.predict(img_batch)           
    predicted_class = CLASS_NAMES[np.argmax(predictions[0])]
    confidence = np.max(predictions[0])
    return {
        'class': predicted_class,
        'confidence': float(confidence)
    }
    
if __name__ == "__main__":
    uvicorn.run(app, host='localhost', port=8000)

I think i'am working on the same project... End-to-end Tomato or Potato or ... Disease, I've encountered the same problem and thanks to Aymendp, I also fixed the first problem but afterwards it also kept on processing, I've changed my REACT_APP_API_URL to REACT_APP_API_URL= http://localhost:8000/predict en then I restared the npm, it won't work without restarting this, Make sure that you already have your main.py file loading (or wherever you're working) and that the port is open and running, then afterwards restart the npm (by closing it and then back again running "start npm", now the picture will load bu the class will print out nothing and the confidence score is printing out "NaN% , I'm workjing on this now and will let you know a bit later, if you want to know how, I fixed the problem with GPT4 (I use this for A LOT of my problems)