Theo's Typesafe Cult•5mo ago

CORS Errors with LocalHost

I've been testing an application and up until yesterday everything was working fine. Now, I'm getting CORS errors on localhost. I didn't think this was possible as its still the same domain. For context, i'm runnning a next.js frontend which is calling a FASTAPI backend. For testing, my FASTAPI CORS config looks like this:

app = FastAPI()


app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        # "https://mergersai.io",
        # "https://www.mergersai.io",
        "*",
    ],  
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
    expose_headers=["*"],
)

Error: Access to XMLHttpRequest at 'http://localhost:8000/start_scraping' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Has ayone got any ideas? I'm at a loss at how to troubleshoot.

2 Replies

Thrinkxs•5mo ago

Add the local host:3000 to the allowed origin

Alky•5mo ago

I've tried the same code and it's working for me. Try this:

<script>
    fetch("http://127.0.0.1:8000/").then((Response) => {
        return Response.json()
    }).then((data) => {
        console.log(data);
    })
</script>

<script>
    fetch("http://127.0.0.1:8000/").then((Response) => {
        return Response.json()
    }).then((data) => {
        console.log(data);
    })
</script>

Open it with live server and adjust the URL to some simple GET of your backend. See if the CORS error appears. Because if it doesn't, the error is somewhere else.

Gaming

Programming

CORS Errors with LocalHost