I was trying to run a simple reactjs app with fastapi backend by hosting it on the aws ec2 instance. The react js an fastapi servers are running fine at 3000 and 8000 ports respectively but they are not communicating with each other to fetch any kind of response.
The specified react page that gets some request data from "GET" request at url http://ec2.ipv6.id:3000/predictor
. The page runs fine but there is not data and the error is observed in the console as below.
Access to fetch at 'http://localhost:8000/predict'
from origin 'http://my-ec2-instance-public-ipv4:3000' has been blocked by
CORS policy: The request client is not a secure context and
the resource is in more-private address space `local`
The react file is given as below:
import "./predictor.css";
import React, {useEffect, useState, CSSProperties} from "react";
import axios from "axios";
import HashLoader from "react-spinners/HashLoader";
const override: CSSProperties = {
display: "block",
position : "relative",
top: "-100px",
margin: "0 auto",
borderColor: "red",
};
export function Predictor() {
const [cResponse, setcResponse] = useState([]);
const [getPCE, setGetPCE] = useState([]);
// const [getmessage, setgetmessage] = useState([]);
const [loading, setLoading] = useState(false);
let [color, setColor] = useState("red");
let [clicked, setClicked] = useState(false);
const getRes = async () =>{
const requestDict = {
method : "GET",
headers: {
"Content-Type": "application/json",
},
};
const response = await fetch("http://localhost:8000/predict",requestDict);
// http://127.0.0.1:8000/predict
const data = await response.json();
console.log(data);
if(!response.ok) {console.log("response not working properly");}
else{
setcResponse(data);
}
}
const form = document.getElementById("input_form");
const responseF = (e) =>{
e.preventDefault();
setLoading(true);
setClicked(true);
const formData = new FormData(form);
// console.log([...formData]);
axios({
method: "post",
url: "http://localhost:8000/predict",
data: [... formData]
})
.then((data) => {
setGetPCE(data.data);
// setgetmessage(data.message);
setLoading(false);
console.log(data.data);
})
.catch(function (err) {
console.log(err);
})
}
useEffect(() => {
getRes();},[]);
return(
<div id="main_body">.....
The main.py of the fastapi is as below
from fastapi import FastAPI, Form, Depends
from fastapi.middleware.cors import CORSMiddleware
from fastapi.encoders import jsonable_encoder
import joblib
import numpy as np
import os
from own.preprocess import Preprocess
import sklearn
col_data = joblib.load("col_bool_mod.z")
app = FastAPI()
origins = [
"http://127.0.0.1:3000","http://public-ipv4-of-ec2:3000/","http://private-ipv4-of-ec2:3000/"
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"]
)
@app.get("/predict")
async def test():
return jsonable_encoder(col_data)
@app.post("/predict")
async def provide(data: list):
print(data)
output = main(data)
return output
def predict_main(df):
num_folds = len(os.listdir("./models/"))
result_li = []
for fold in range(num_folds):
print(f"predicting for fold {fold} / {num_folds}")
model = joblib.load(f"./models/tabnet/{fold}_tabnet_reg_adam/{fold}_model.z")
result = model.predict(df)
print(result)
result_li.append(result)
return np.mean(result_li)
def main(data):
df = Preprocess(data)
res = predict_main(df)
print(res)
return {"value": f"{np.float64(res).item():.3f}" if res >=0 else f"{np.float64(0).item()}"}
Just wanted to connect react app with fastapi backend served in same ec2 instance at different port.