CORS preflight request failed

Workarounds

1. 92% success Configure the server to respond correctly to preflight OPTIONS requests

   1. Handle OPTIONS method on the API endpoint
   2. Return required headers:
      Access-Control-Allow-Origin: https://your-frontend.com
      Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
      Access-Control-Allow-Headers: Content-Type, Authorization
      Access-Control-Max-Age: 86400
   3. Return 204 No Content for OPTIONS requests
   4. For credentials: set Access-Control-Allow-Credentials: true with a specific origin (not *)
   5. In nginx: add_header 'Access-Control-Allow-Origin' '$http_origin' always;
   6. Test with: curl -X OPTIONS -H 'Origin: https://your-frontend.com' -v https://api.example.com/endpoint

2. 90% success Use a reverse proxy to serve both frontend and API from the same origin

   1. Configure nginx or similar to proxy API requests:
      location /api/ { proxy_pass http://backend:3000/; }
      location / { root /var/www/frontend; }
   2. Both frontend and API now share the same origin, eliminating CORS entirely
   3. This avoids all CORS complexity and preflight overhead
   4. For development, configure webpack-dev-server or vite proxy:
      proxy: { '/api': { target: 'http://localhost:3000' } }