Preflight requests behavior in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an Express server receives a CORS preflight OPTIONS request?

Consider an Express server configured with CORS middleware. When the browser sends a preflight OPTIONS request, what is the typical server response behavior?

Express

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.options('*', cors());
app.get('/data', (req, res) => res.json({msg: 'Hello'}));
app.listen(3000);

A The server ignores OPTIONS requests and returns 404 Not Found.

B The server responds with status 200 and the JSON data from the GET /data route.

C The server responds with status 204 and appropriate CORS headers without calling other route handlers.

D The server responds with status 500 Internal Server Error due to missing OPTIONS handler.

💡 Hint

Think about how CORS middleware handles OPTIONS requests before other routes.

Express CORS middleware automatically handles preflight OPTIONS requests by sending a 204 No Content response with the correct CORS headers. It does not proceed to other route handlers.

📝 Syntax

intermediate

Which Express code snippet correctly handles CORS preflight requests for all routes?

Choose the code snippet that properly enables CORS preflight OPTIONS requests for every route in an Express app.

A app.use(cors()); app.options('*', cors());

B app.get('*', cors()); app.options('*', cors());

C app.use(cors()); app.get('*', cors());

D app.options('*', (req, res) => res.sendStatus(200));

💡 Hint

Remember that preflight requests use the OPTIONS method and need special handling.

Using app.use(cors()) enables CORS for all routes and methods. Adding app.options('*', cors()) ensures OPTIONS preflight requests are handled with proper CORS headers.

🔧 Debug

advanced

Why does this Express server fail to respond correctly to CORS preflight requests?

Examine the code below. The server does not respond properly to preflight OPTIONS requests, causing CORS errors in the browser. What is the main issue?

Express

const express = require('express');
const app = express();
app.get('/api', (req, res) => res.json({data: 'ok'}));
app.listen(3000);

A The GET route handler incorrectly responds to OPTIONS requests causing errors.

B The server uses express but does not import the http module.

C The server listens on port 3000 which is blocked by the browser.

D The server lacks CORS middleware and does not handle OPTIONS requests, so preflight fails.

💡 Hint

Think about what the browser expects before sending actual requests with custom headers.

Without CORS middleware, Express does not send the required CORS headers or handle OPTIONS preflight requests, so browsers block the request.

❓ state_output

advanced

What is the response status code for a successful CORS preflight request in Express with cors middleware?

Given an Express app using the cors middleware, what status code does the server send back for a successful OPTIONS preflight request?

Express

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.options('*', cors());
app.listen(3000);

A 204 No Content

B 200 OK

C 404 Not Found

D 500 Internal Server Error

💡 Hint

Preflight requests do not return data, only headers.

The CORS middleware responds to OPTIONS preflight requests with status 204 No Content, indicating success without a response body.

🧠 Conceptual

expert

Which header must the Express server include in the preflight response to allow credentials in CORS requests?

When handling CORS preflight OPTIONS requests, which response header must the Express server include to allow the browser to send credentials (cookies, HTTP auth) with cross-origin requests?

A Access-Control-Allow-Origin: *

B Access-Control-Allow-Credentials: true

C Access-Control-Allow-Methods: GET, POST, OPTIONS

D Access-Control-Allow-Headers: Content-Type

💡 Hint

Credentials require a specific header that cannot be wildcarded.

The Access-Control-Allow-Credentials: true header tells the browser it can include credentials in cross-origin requests. The origin cannot be '*'.

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