localhost CORS error using Flask and React - reactjs

Question

I am having some trouble with the development of my React app. On the client side, I'm using Axios to make the requests to the API (Flask).
The problem is that I frequently get a CORS error only when I send the request to the localhost API. I have the same API running in Heroku without any error.
API route = http://127.0.0.1:5000
Client route = http://localhost:3000/#/
Client code:
const endpoint = process.env.REACT_APP_ENDPOINT;
// Fetch API data
const [data, setData] = useState([{}]);
useEffect(() => {
axios.get(endpoint + "/api/rooms")
.then((data) => {
console.log("API endpoint data retrieved.");
if (data[200] !== "No Rooms") {
setData(data);
}
}).catch((err) => {
console.error(err.message);
console.log("No rooms retrieved from API endpoint.");
});
}, [endpoint]);
Server (Python) code:
import os
from flask import Flask
from flask_socketio import SocketIO
from flask_cors import CORS, cross_origin
from dotenv import load_dotenv
from app_modules.util.rooms import Rooms
load_dotenv()
app = Flask(__name__, static_folder="/client/build")
app.config['SECRET_KEY'] = os.getenv("app_key")
app.config['CORS_HEADERS'] = "Content-Type"
ALLOWED_ORIGINS = os.getenv("ALLOWED_ORIGINS")
cors = CORS(app, resources={"/*": {"origins": ALLOWED_ORIGINS}}, support_credentials=True)
socketio = SocketIO(app,
cors_allowed_origins=ALLOWED_ORIGINS,
logger=False,
engineio_logger=False,
cors_credentials=True)
rooms = Rooms()
#app.route('/api/rooms')
#cross_origin(supports_credentials=True)
def home():
return {"rooms": rooms.secure_api} if rooms.secure_api else {"200": "No Rooms"}
Note:
ALLOWED_ORIGINS=*
But I keep getting this error:

Answer 1

In your server code change
ALLOWED_ORIGINS = os.getenv("ALLOWED_ORIGINS")
to
ALLOWED_ORIGINS = ['localhost', '127.0.0.1']