Preflight requests behavior in Express - Mini Project: Build & Apply

Handling Preflight Requests in Express

📖 Scenario: You are building a simple Express server that needs to handle cross-origin requests from a frontend app. Browsers send a preflight request using the HTTP OPTIONS method to check if the server allows the actual request.To make your server work correctly with cross-origin requests, you need to handle these preflight requests properly.

🎯 Goal: Create an Express server that responds correctly to preflight OPTIONS requests by sending the right CORS headers and status code.

📋 What You'll Learn

Create an Express app instance

Set a variable allowedOrigin with the value 'http://example.com'

Add middleware to handle OPTIONS requests for all routes

Respond to OPTIONS requests with status 204 and the correct CORS headers

💡 Why This Matters

🌍 Real World

Handling preflight requests is essential for APIs that serve frontend apps running in browsers, ensuring smooth cross-origin communication.

💼 Career

Understanding and implementing CORS and preflight request handling is a common task for backend developers working with web APIs.

1

Create the Express app

Create a variable called express that requires the 'express' module. Then create a variable called app by calling express().

Express

# Your code here

Hint

Use require('express') to import Express and then call it to create the app.

2

Set the allowed origin variable

Create a constant variable called allowedOrigin and set it to the string 'http://example.com'.

Express

const express = require('express');
const app = express();

// Your code here

Hint

Use const allowedOrigin = 'http://example.com' to set the allowed origin.

3

Add middleware to handle OPTIONS preflight requests

Add middleware to app that listens for all OPTIONS requests on any path using app.options('*', ...). Inside the handler function, set the response headers Access-Control-Allow-Origin to allowedOrigin, Access-Control-Allow-Methods to 'GET,POST,PUT,DELETE', and Access-Control-Allow-Headers to 'Content-Type'. Then send a response with status code 204 and no content.

Express

const express = require('express');
const app = express();

const allowedOrigin = 'http://example.com';

// Your code here

Hint

Use app.options('*', (req, res) => { ... }) to handle all OPTIONS requests.

4

Complete the server with a simple GET route

Add a GET route on / that responds with the text 'Hello World'. Then export the app module using module.exports = app.

Express

const express = require('express');
const app = express();

const allowedOrigin = 'http://example.com';

app.options('*', (req, res) => {
  res.set('Access-Control-Allow-Origin', allowedOrigin);
  res.set('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
  res.set('Access-Control-Allow-Headers', 'Content-Type');
  res.sendStatus(204);
});

// Your code here

Hint

Use app.get('/', (req, res) => { res.send('Hello World') }) and export the app.

Practice

1. What is the main purpose of a preflight request in Express when handling cross-origin requests?

easy

A. To check if the server allows the actual request method and headers before sending it

B. To send the actual data to the server immediately

C. To close the connection after the first request

D. To authenticate the user credentials

Solution

1. Step 1: Understand preflight request role

   A preflight request uses the OPTIONS method to ask the server if the actual request is safe to send.

2. Step 2: Identify what preflight checks

   It checks allowed methods and headers to prevent unauthorized cross-origin requests.

3. Final Answer:

   To check if the server allows the actual request method and headers before sending it -> Option A

4. Quick Check:

   Preflight checks permissions = B [OK]

Hint: Preflight = permission check before real request [OK]

Common Mistakes:

• Thinking preflight sends actual data
• Confusing preflight with authentication
• Assuming preflight closes connection

2. Which Express method is used to handle preflight OPTIONS requests?

easy

A. app.options()

B. app.post()

C. app.get()

D. app.use()

Solution

1. Step 1: Recall HTTP methods in Express

   Express provides methods matching HTTP verbs like get, post, options, etc.

2. Step 2: Identify method for preflight

   Preflight requests use the OPTIONS method, so Express uses app.options() to handle them.

3. Final Answer:

   app.options() -> Option A

4. Quick Check:

   OPTIONS method handled by app.options() [OK]

Hint: Preflight uses OPTIONS, so use app.options() [OK]

Common Mistakes:

• Using app.get() or app.post() for OPTIONS requests
• Confusing app.use() as handler for OPTIONS
• Not handling OPTIONS method at all

3. Consider this Express code snippet handling CORS preflight:

app.options('/data', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,POST');
  res.sendStatus(204);
});

What will the server respond to an OPTIONS request to '/data'?

medium

A. Status 404 Not Found

B. Status 204 with headers allowing any origin and GET, POST methods

C. Status 200 with no headers

D. Status 500 Internal Server Error

Solution

1. Step 1: Analyze headers set in response

   The code sets 'Access-Control-Allow-Origin' to '*' allowing any origin, and 'Access-Control-Allow-Methods' to 'GET,POST'.

2. Step 2: Check response status

   res.sendStatus(204) sends HTTP status 204 (No Content) with the headers.

3. Final Answer:

   Status 204 with headers allowing any origin and GET, POST methods -> Option B

4. Quick Check:

   Preflight responds 204 + CORS headers = C [OK]

Hint: 204 status with CORS headers means preflight success [OK]

Common Mistakes:

• Expecting status 200 instead of 204
• Missing CORS headers in response
• Confusing 404 or 500 errors

4. You wrote this Express code to handle preflight requests:

app.options('/api', (req, res) => {
  res.header('Access-Control-Allow-Origin', 'https://example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
  res.end();
});

But the browser still blocks the actual request. What is the likely problem?

medium

A. Access-Control-Allow-Origin should be '*'

B. Using res.end() instead of res.sendStatus(204)

C. Missing Access-Control-Allow-Headers header for custom headers

D. Incorrect URL path in app.options()

Solution

1. Step 1: Understand preflight header requirements

   If the actual request uses custom headers, the server must respond with Access-Control-Allow-Headers listing them.

2. Step 2: Check code for missing headers

   The code does not set Access-Control-Allow-Headers, so browser blocks the request due to missing allowed headers.

3. Final Answer:

   Missing Access-Control-Allow-Headers header for custom headers -> Option C

4. Quick Check:

   Missing allowed headers header blocks request = D [OK]

Hint: Always include Access-Control-Allow-Headers if custom headers used [OK]

Common Mistakes:

• Assuming res.end() causes the block
• Thinking Access-Control-Allow-Origin must be '*' always
• Ignoring missing allowed headers header

5. You want to allow cross-origin requests only from 'https://trusted.com' with methods GET and POST, and allow custom header 'X-Custom-Auth'. Which Express preflight handler is correct?

hard

A. app.options('/resource', (req, res) => {
res.header('Access-Control-Allow-Origin', 'https://trusted.com');
res.header('Access-Control-Allow-Headers', 'X-Custom-Auth');
res.sendStatus(404);
});

B. app.options('/resource', (req, res) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
res.sendStatus(200);
});

C. app.options('/resource', (req, res) => {
res.header('Access-Control-Allow-Origin', 'https://trusted.com');
res.header('Access-Control-Allow-Methods', 'GET');
res.sendStatus(204);
});

D. app.options('/resource', (req, res) => {
res.header('Access-Control-Allow-Origin', 'https://trusted.com');
res.header('Access-Control-Allow-Methods', 'GET, POST');
res.header('Access-Control-Allow-Headers', 'X-Custom-Auth');
res.sendStatus(204);
});

Solution

1. Step 1: Match allowed origin and methods

   app.options('/resource', (req, res) => { res.header('Access-Control-Allow-Origin', 'https://trusted.com'); res.header('Access-Control-Allow-Methods', 'GET, POST'); res.header('Access-Control-Allow-Headers', 'X-Custom-Auth'); res.sendStatus(204); }); sets Access-Control-Allow-Origin to 'https://trusted.com' and methods to 'GET, POST' as required.

2. Step 2: Include custom headers and correct status

   It includes Access-Control-Allow-Headers for 'X-Custom-Auth' and sends status 204 (No Content), which is correct for preflight.

3. Final Answer:

   app.options('/resource', (req, res) => { res.header('Access-Control-Allow-Origin', 'https://trusted.com'); res.header('Access-Control-Allow-Methods', 'GET, POST'); res.header('Access-Control-Allow-Headers', 'X-Custom-Auth'); res.sendStatus(204); }); -> Option D

4. Quick Check:

   Correct origin, methods, headers, and 204 status = A [OK]

Hint: Include origin, methods, headers, and send 204 for preflight [OK]

Common Mistakes:

• Using '*' origin when only one domain allowed
• Missing Access-Control-Allow-Headers for custom headers
• Sending wrong status code like 200 or 404