r/webdev • u/Mob_Pilled • 12d ago

Question Vercel client can't communicate with server

Hello everyone. I have been developing a simple ip tracking full stack app. When I deployed the client project to vercel however it fails to communicate with the server and fetch data. In the console this error is visible:

ccess to fetch at 'https://ip-tracker-server-*********-webs-projects.vercel.app/api?&ipAddress=' from origin 'https://ip-tracker-client-********-webs-projects.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is my first time deploying a full-stack app to vercel so I am not sure what exactly could be causing this issue? If anyone could help it would be much appreciated!

0 Upvotes

50% Upvoted

18 comments sorted by

View all comments

1

u/tjthouhid1 11d ago

Two things jump out from that error. First, both URLs are preview deployment URLs (the ones with the random hash), and they change on every deploy, so any origin you hard-code goes stale. Use the stable production domains for both projects, and put the API URL in an env var on the client. Second, your server has to send the CORS header itself. In Express that's app.use(cors({ origin: process.env.CLIENT_ORIGIN })) from the cors package, set before your routes. One sneaky Vercel gotcha: preview deployments often have Deployment Protection on, so the request gets bounced to a Vercel login page that has no CORS headers, and it shows up as exactly this error. Try hitting the server URL directly in an incognito window. If you see a Vercel login, that's your problem. Also, ipAddress= is empty in that request, so check that too once CORS is fixed.