Getting CORS error despite correct link in the backend & getting feedback on vercel deployment

I am getting this error:
[Screenshot]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://video-streaming-backend-seven.vercel.app/login.(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://video-streaming-backend-seven.vercel.app/login. (Reason: CORS request did not succeed). Status code: (null).

I have created an express typescript project on GitHub and trying to deploy to vercel. Below is the folder structure,

db
dist
middleware
node_modules
routes
thumbnails
videos
.gitignore
package.json
package-lock.json
README.md
tsconfig.json
vercel.json

And this is my vercel.json

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

The setting on vercel when deploy are all on default.
Github url for this project is
Backend: GitHub - rishabhdwivedii/video-streaming-backend,
Frontend: GitHub - rishabhdwivedii/video-streaming-frontend,
please feel free to take a look if my description is not clear enough.
The deployment links are also there in the repo.
Thanks in advance!
I have tried changing the cors configuration to allow any frontend to access my backend the problem still exists, I also tried to set Access-Control-Allow-Origin using middleware but that too did not work.

Just a random guess, but try adding pre-flight (maybe just test with app.options('*', cors()))

Enabling CORS Pre-Flight

It may have something to do with the auth middleware because it looks like it only affects the auth-protected routes (I think?) and the OPTIONS block.

did try it but didn’t resolve. Thanks.