Why does my React app send an OPTIONS request before every POST request?

React apps typically send Content-Type: application/json and Authorization headers with API requests. These make the request 'non-simple' per the CORS specification, which requires the browser to send a preflight OPTIONS request to check if the server allows the actual request. You cannot prevent this browser behavior, but you can reduce its impact by setting Access-Control-Max-Age on the server response (up to 86400 seconds in Chrome) to cache the preflight result so it isn't repeated for every request.

Why does CORS work in development with Create React App but fail in production?

CRA's development server proxies API requests through its built-in proxy (configured via the 'proxy' field in package.json or src/setupProxy.js). This makes API calls same-origin, bypassing CORS entirely. In production, your React app is served as static files from a CDN or web server, and API calls go directly to the backend server on a different origin. You must configure CORS headers on the backend server for production. The best approach is to test with actual CORS configuration during development by disabling the proxy periodically.

How do I configure a development proxy in Vite for my React app?

In vite.config.js, add a server.proxy configuration: export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:3001', changeOrigin: true, rewrite: (path) => path.replace(/^/api/, '') } } } }). This proxies all requests starting with /api to your backend server. Use relative URLs in your fetch calls (e.g., fetch('/api/users')) so the proxy works in development and can be easily replaced with the real API URL in production via environment variables.

How do I send cookies cross-origin from a React app?

Set credentials: 'include' in your fetch options or withCredentials: true in axios. The server must respond with Access-Control-Allow-Credentials: true AND set Access-Control-Allow-Origin to the exact origin (not *). If using axios, create an instance with withCredentials: true as the default. On the server, ensure your CORS middleware sets allowCredentials to true and specifies the exact origin. Also verify that cookies have SameSite=None and Secure attributes for cross-origin usage in modern browsers.

Can I avoid CORS entirely in production by serving the React app and API from the same domain?

Yes, this is the recommended approach when possible. Use a reverse proxy like Nginx to serve your React static files from the root path (/) and proxy API requests (e.g., /api/) to the backend. Since both share the same origin, no CORS headers are needed. Configure Nginx with 'location / { root /var/www/build; try_files $uri /index.html; }' for the React app and 'location /api/ { proxy_pass http://backend:3001/; }' for the API. This also simplifies cookie handling since everything is same-origin.

Preflight CORS Requests in React Applications