CORS in Production vs Development: What Changes for React Apps

CORS in Production vs Development: What Changes for React Apps

CORS handling is different in development and production. Understanding what changes prevents bugs when you deploy.

In Development

Your frontend runs on localhost and calls an external API. Without permission, the browser blocks the response. You use a proxy or extension to work around it locally.

In Production

Your frontend is served from a real domain. If it calls your own backend, you set CORS headers on the backend to allow the frontend domain. If it calls a third-party, you either have permission or route through your backend.

Why the Proxy Works Differently

In development, a bundler proxy bypasses CORS by routing through server-side. In production, you usually do not have the bundler running, so you route through your actual backend instead.

Same-Origin Is Easiest

If your frontend and backend are served from the same origin, there is no CORS issue at all. Many production setups proxy API calls through the same domain to avoid CORS entirely.

Credentials Get Stricter in Production

Development often skips auth, but production uses cookies or tokens. With credentials, you must set specific origins on the server, not a wildcard, or the browser blocks the response.

Common Deploy Bug

Everything works locally with a proxy, then breaks in production because the production backend does not have CORS configured for the frontend domain. Always test CORS after deploying.

The Takeaway

CORS is bypassed locally with a proxy, but in production it must be configured correctly on the server. Same-origin is easiest, credentials are stricter, and always test CORS after deploying, not just on localhost.