CORS Issue with HuggingFace Spaces and Netlify-hosted React App

Beginners
1

Hello everyone,

I’m currently experiencing an issue with my React application hosted on Netlify and my FastAPI application hosted on HuggingFace Spaces. The issue arises when I make a request from my React app to my FastAPI application.

Here’s the error message I receive:

Access to XMLHttpRequest at 'https://neonmcgameromgomg-fastapiapplication.hf.space/?prompt=Tiger' from origin 'mywebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In my FastAPI application, I have already set up CORS middleware to allow all origins, methods, and headers. Here’s the relevant code snippet:

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

Despite this, I’m still encountering the CORS issue. My HuggingFace Space is public, and I’m not sure why the ‘Access-Control-Allow-Origin’ header isn’t being recognized.

Any help or guidance on this issue would be greatly appreciated. Thank you in advance!