TTC
Theo's Typesafe Cult•12mo ago
BeigeSponge

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
Thrinkxs•12mo ago
Add the local host:3000 to the allowed origin
Alky
Alky•12mo 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.

Did you find this page helpful?