Fixing Error (Vercel) -> CORS policy: No 'Access-Control-Allow-Origin'

Project Details

Flask based api endpoint, hosted as a seperate project on vercel serving requests from a next js project which is also hosted on vercel.

What happend

Made few changes to api endpoint like adding caching etc and few other tweaks, deployed to vercel and started getting following error when being called :

Access to fetch at 'https://flaskendpoint/api/dosomething' from origin 'https://yoursite.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Why ??

Had no idea, this was not a new project, had already taken care of all the CORS related stuff and project was working fine from both front and back end when deployed earlier. But suddely this error.

Fix

Made sure didn't touch already existing CORS tackling code. No issues there, so went to api logs on vercel since it was a 500. Found out a debug printf statment was crashing the code and causing 500(was not even in the same endpoint i was calling but still). Worked fine on my machine though, anyways commented it, deployed again. All good.

Lessons 🤔

If you are sure that you have tackled and checked everything related to CORS already and still getting this, there is a high probability some of your code is crashing while api is being called. I even got the same error when there was a typo in api endpoint. So, seems like a catch all error when things goes wrong. The best place to start should be api logs on vercel.

Hope this helps.

Back To All Blogs