How to handle CORS issues when deploying a nodeJS express app on vercel??

Kartikey Jaiswal — Tue, 23 Jan 2024 22:07:26 +0000

When we deploy a simple nodejs express app to vercel, we are most likely to encounter cors issues most of the times. Personally, I often get cors errors each time I deploy to vercel.

Till yesterday, I was getting intimidated by these errors very much. Even, I have spent more than 2 days in resolving this error. The app works on my local machine but as soon I deploy it on vercel, it gets cors issue.

There are multiple solutions of this problem. Some of you will say using CORS node js module will work fine. But it does not. It tackle some of the errors but not all and not every time.
The more effective solution is giving vercel the headache of your CORS issues.

So, This is the folder structure of most of the simple apps.

We have a root folder in which we have our index.js, package.json, package-lock.json.
Our index.json has all our express server code.

Now, to deploy it on vercel, we make vercel.json file in the root folder. Generally, this is the vercel.json code we write for our routes and build. This works most of the time and almost everyone uses this copy-paste template to deploy on vercel.



 {
   "version": 2,
   "builds": [
     {
       "src": "index.js",
       "use": "@vercel/node"
     }
   ],
   "routes": [
     {
       "src": "/(.*)",
       "dest": "/"
     }
   ]
 }

The problem I got in my projects was, even though I was using cors module in my code but then to I was having cors error sometimes. I went to vercel documentation and found out that we can fix this error using vercel.json. I tried solutions given on vercel (copied and pasted the code) but it was failing the checks of deployment. The solutions given on vercel are for specific cases. The solutions in the vercel documentation about vercel.json properties did not mention where or with which property we dont have to use these headers or properties. Encountering this problem took me more than 2 days to understand whats wrong I was doing. I tried searching on stackoverflow, reddit and other discussion portals and communities but didn’t found a good and simple solution. Now, when I have handled the issue I want to share this post so that developers dont have to go here and there for resolving and waste their time trying and handling errors.

Here, is the new updated vercel.json file handling cors issues.



{
    "version": 2,
    "builds": [
      {
        "src": "*.js",
        "use": "@vercel/node"
      }
    ],
    "routes": [
      {
         "src": "/(.*)",
         "dest": "/",
          "methods": ["GET","POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
          "headers": {
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Credentials": "true",
             "Access-Control-Allow-Headers": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
         }
     }
   ]
}

This JSON code can save you lots and lots of time when deploying your code on vercel. The methods and header properties ensure that vercl handle all the cors issues.

You can adjust routes and builds according to your file structure.

Feel free to ask any questions and leave your feedback. Hope you find this post helpful. I will be regularly posting the problems I face in my development journey, that dont have a staright solution available on internet and their solutions I get from my experiments.

Thank you so much for giving time and reading my post.
Kartikey Jaiswal

Forem: Kartikey Jaiswal

How to handle CORS issues when deploying a nodeJS express app on vercel??