Free fixes / Card 4

CORS / split frontend-backend

Symptom

Browser console shows CORS errors. Frontend is on one domain (or Vercel), API on another (Render/Railway). Works when both run on localhost.

Plain English

Browsers block cross-origin API calls unless the API sends the right CORS headers, or you proxy /api through the frontend host so the browser thinks it is same-origin.

Checklist

1. Confirm the failing request URL in DevTools Network (origin vs API host).
2. Prefer a rewrite/proxy: frontend /api/* → real backend (Vercel rewrites are common).
3. Or configure API CORS for your exact frontend origin (not * if you use cookies).
4. If you use cookies/sessions, set SameSite and secure cookie flags for production.
5. Retest the failing call from the live frontend only (not from localhost pointed at prod).

Paste-ready fix prompt

Paste this into Cursor, Claude, Copilot, Lovable, Bolt, or whichever coding agent you use.

My frontend and API are on different production hosts. Browser shows CORS failures that do not happen on localhost.

1. Inspect how the client builds API URLs.
2. Prefer a same-origin proxy/rewrite from the frontend host to the API. Give exact config for this stack/host.
3. If proxy is impossible, give a minimal CORS config that allows only my frontend origin and supports credentials if we use cookies.
4. Call out cookie SameSite/secure issues if auth uses cookies.
5. Do not redesign the API.