Why Preflight requests behavior in Express? - Purpose & Use Cases

The Big Idea

Ever wonder why some API calls mysteriously fail in your browser but work fine elsewhere?

The Scenario

Imagine building a web app where your frontend calls an API on a different server. You try to send a request with custom headers or methods like PUT or DELETE.

Before the actual request, the browser sends a special "preflight" request to check if the server allows it.

The Problem

If you don't handle these preflight requests properly on your server, the browser blocks your real request silently.

This leads to confusing errors and broken features, making debugging very frustrating.

The Solution

Express can detect and respond to preflight requests automatically, telling the browser it's safe to proceed.

This smooth handshake lets your frontend and backend communicate securely and reliably across domains.

Before vs After

✗ Before

app.use((req, res, next) => {
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    return res.sendStatus(200);
  }
  next();
});

✓ After

const cors = require('cors');
app.use(cors());

What It Enables

It enables seamless cross-origin communication by automatically handling browser security checks.

Real Life Example

When your React app on localhost calls an Express API on another domain, preflight handling ensures your PUT or DELETE requests work without errors.

Key Takeaways

Browsers send preflight requests to check permissions before sensitive calls.

Without proper handling, requests fail silently and cause bugs.

Express middleware like CORS simplifies preflight response management.