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?