I was making a POST request which sends an image file from my UI to the backend server.
Backend Server:
from fastapi import FastAPI, UploadFile
from fastapi.middleware.cors import CORSMiddleware
import numpy as np
import tensorflow as tf
from io import BytesIO
from PIL import Image
app = FastAPI()
origins = ["http://localhost:5173/"]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
model = tf.keras.models.load_model("../models/1")
class_names = ["Normal", "Tuberculosis"]
def convert_image_to_np_array(bytes):
# Read bytes as PIL image and convert it to np array
np_array = np.array(Image.open(BytesIO(bytes)))
return np_array
@app.post("/predict")
async def predict_tuberculosis(file: UploadFile):
bytes = await file.read()
np_array = convert_image_to_np_array(bytes)
batch_image = np.expand_dims(np_array, axis=0)
resized_batch_image = np.resize(batch_image, (1,256,256,3))
prediction = model.predict(resized_batch_image)
label = class_names[np.argmax(prediction)]
accuracy = np.max(prediction)
print(accuracy)
return label
Frontend:
import React from "react"
import { useState } from "react"
import axios from "axios"
import "./App.css"
function App() {
function callPrediction(file) {
const formData = new FormData()
formData.append("file", file)
axios.post("http://localhost:8000/predict", formData)
.then(res => setResult(res.data))
.catch(err => console.log(err))
}
...
Note: The file
input from callPrediction
has the format like this
When I call the function callPrediction
to send an image file as an input to the function predict_tuberculosis
, I got this error popping up
I did go searching for this but all the solutions I got was just adding CORS to my backend (which I have already done).
I really appreciate any helps! Thank you
2
Answers
The origins array in your backend server should contain the client url: http://localhost:8000.
so make sure to add it to your origins array.
You should remove the trailing slash from the origin URL in:
The origin URL should instead look like this
http://localhost:5173
. Hence:For further details, please have a look at the following answers here, here, as well as here, here and here.