Preflight Requests

A preflight request is an OPTIONS request the browser sends before the actual request to check if the cross-origin request is allowed.

When Preflight is Triggered

Simple Requests (NO preflight):
- Method: GET, HEAD, POST
- Headers: Only Accept, Content-Language, Content-Type
- Content-Type: application/x-www-form-urlencoded,
                multipart/form-data, text/plain

Non-Simple Requests (PREFLIGHT):
- Method: PUT, PATCH, DELETE, CONNECT, TRACE
- Headers: Authorization, X-Custom-Header
- Content-Type: application/json

Preflight Flow

Browser                            Server
  |                                  |
  | 1. Actual request would be:      |
  |    PUT /api/users/123            |
  |    Content-Type: application/json|
  |    Authorization: Bearer ...     |
  |                                  |
  | 2. Browser sends preflight:      |
  |    OPTIONS /api/users/123        |
  |    Origin: https://app.example.com|
  |    Access-Control-Request-Method: |
  |      PUT                         |
  |    Access-Control-Request-Headers:|
  |      Content-Type, Authorization |
  |--------------------------------->|
  |                                  |
  | 3. Server responds:              |
  |    204 No Content                |
  |    Access-Control-Allow-Origin:  |
  |      https://app.example.com     |
  |    Access-Control-Allow-Methods: |
  |      GET, POST, PUT, DELETE      |
  |    Access-Control-Allow-Headers: |
  |      Content-Type, Authorization |
  |    Access-Control-Max-Age: 86400 |
  |<---------------------------------|
  |                                  |
  | 4. If allowed, browser sends:    |
  |    PUT /api/users/123            |
  |    Content-Type: application/json|
  |    Authorization: Bearer ...     |
  |--------------------------------->|
  |                                  |
  | 5. Server responds:              |
  |    200 OK + JSON                 |
  |<---------------------------------|

Optimizing Preflight

Access-Control-Max-Age: 86400

This caches preflight results for 24 hours, avoiding repeated OPTIONS requests.

Backend Handling

// Express.js - preflight is handled by cors middleware
app.use(cors({ origin: 'https://app.example.com' }));

// Manual handling
app.options('/api/*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://app.example.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Max-Age', '86400');
  res.sendStatus(204);
});

Key Principles

1. Follow SOLID principles
2. Write clean, readable code
3. Test thoroughly
4. Document decisions
5. Monitor in production

Implementation

• Start simple, refactor as needed
• Use established patterns
• Consider trade-offs
• Review with peers

Continuous Improvement

• Learn from incidents
• Update documentation
• Share knowledge
• Mentor others

Key Points

• Understanding Preflight Requests is essential for production systems
• Always consider scalability and maintainability
• Test thoroughly before deploying to production
• Monitor performance and set up alerting

Common Patterns

1. Validation: Always validate input at the boundary
2. Error Handling: Use structured error responses
3. Logging: Log key events for debugging
4. Testing: Unit, integration, and load tests
5. Documentation: Keep docs updated with code changes