INFO: 127.0.0.1:51647 – “POST /api/predictvgg HTTP/1.1” 405 Method Not Allowed on FastAPI server

A simple FastAPI (0.113.0) serves request from front end React client on Ubuntu 24 server. There is a POST request /api/predictvgg from the react client to upload image and FastAPI server throws

INFO: 127.0.0.1:51647 - "POST /api/predictvgg HTTP/1.1" 405 Method Not Allowed

The React client upload an png image file to FastAPI server. Here is the React client:

const handleSubmit = async (event) => {
  event.preventDefault();
  setShowTransferSpinner(true);
  let metadata = {
    painter_id: 0, //selectedPainter.id,
    binary_flag: 1,
  };
  const formData = new FormData();
  formData.append("image", selectedImage); // Append the file
  formData.append("metadata", JSON.stringify(metadata)); // Append the metadata
  try {
    const response = await fetch(`http://localhost:8000/api/predictvgg`, {
      method: "POST",
      body: formData,
    }); //<<== here is a post request.

    if (response.ok) {
      const result = await response.json();
      console.log("Prediction response:", result.predictions);
    } else {
      console.error("Error in file upload:", response.statusText);
    }

    setShowTransferSpinner(false);
  } catch (err) {
    console.log("Error in submit", err);
    setShowTransferSpinner(false);
  }
};

There is POST method on FastAPI server is:

#cors for react client request from port 3000
origins = [
    "http://localhost:3000"
]

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

@app.post('/api/predictvgg')
async def predict(image: UploadFile = File(...), metadata: str = Form(...)):  
    # Access the uploaded image
    image_data = await image.read()
  ...

What caused the error of 405 Method Not Allowed on FastAPI server?