CORS error when deploying MERN app: 'Access-Control-Allow-Origin' missing header for hosted server, and 404 Not Found on server deployment

Question

I have a MERN app which is divided into 2 folders client and server

I have hosted the client and server separately on Vercel and then replaced the localhost URL in the code with the appropriate URLs

The Tree structure is as follows:

├───client
│   ├───public
│   └───src
│       └───pages
└───server
    ├───Controllers
    ├───middleware
    ├───routes
    └───util

For reference, this is the Github repo https://github.com/SwayamBadhe/Collaborative-Text-Editor

I have hosted the client and server separately on Vercel and then replaced the localhost URL in the code with the appropriate URLs

When I am using Localhost everything works fine

i have this cors in my server/app.js

app.use(
  cors({
    origin: ['http://localhost:3000'],
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    credentials: true,
  })
);

and this in my client side

const { data } = await axios.post(
        'http://localhost:3001/login',
        {
          ...inputValue,
        },
        { withCredentials: true }
      );

The issue arrises when I change the URL to hosted URL like

app.use(
  cors({
    origin: ['https://collaborative-text-editor-n41l.vercel.app'],
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    credentials: true,
  })
);

and this in my client side

const { data } = await axios.post(
        'https://collaborative-text-editor-xi.vercel.app/login',
        {
          ...inputValue,
        },
        { withCredentials: true }
      );

now when i try to use the app on browser i get this error

Access to XMLHttpRequest at 'https://collaborative-text-editor-xi.vercel.app/login' from origin 'https://collaborative-text-editor-n41l.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST https://collaborative-text-editor-xi.vercel.app/login net::ERR_FAILED

Also when I navigate to where my server is hosted I get 404 NOT_FOUND

Failed to load resource: the server responded with a status of 404 ()

How can I fix this? Everything works on localhost but now when hosted