Why CORS matters for APIs in Express - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main purpose of CORS in APIs?

Why do APIs implement CORS (Cross-Origin Resource Sharing)?

A To allow web pages from different origins to access API resources securely

B To speed up API response times by caching data

C To encrypt API data during transmission

D To restrict API access only to mobile devices

💡 Hint

Think about how browsers control access to resources from different websites.

CORS is a security feature that lets servers specify who can access their resources from different origins. It prevents unauthorized cross-site requests.

❓ component_behavior

intermediate

What happens if an API does not set CORS headers?

Consider a browser-based app trying to fetch data from an API that does not send CORS headers. What will happen?

A The API response is cached indefinitely

B The browser blocks the response and shows a CORS error

C The API returns a 404 Not Found error

D The browser automatically adds CORS headers to the request

💡 Hint

Browsers enforce CORS to protect users from malicious sites.

If the API does not send CORS headers, browsers block the response to protect the user from unauthorized cross-origin requests.

📝 Syntax

advanced

Which Express code snippet correctly enables CORS for all origins?

Choose the Express.js code that properly enables CORS for any website to access the API.

Express

const express = require('express');
const app = express();
// Which code below enables CORS for all origins?

A app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); next(); });

B app.use(cors({ origin: 'http://example.com' }));

C app.use(cors({ origin: '*' }));

D app.use((req, res) => { res.header('Access-Control-Allow-Origin', 'none'); next(); });

💡 Hint

Look for the code that sets the header to allow all origins.

Setting the header 'Access-Control-Allow-Origin' to '*' allows any origin to access the API. Option A does this correctly.

🔧 Debug

advanced

Why does this Express CORS setup cause errors?

Given this Express code, why might CORS errors still occur? const cors = require('cors'); app.use((req, res) => { res.send('Hello'); }); app.use(cors());

A Because the app does not listen on a port

B Because the response is sent before CORS headers are set

C Because the cors package is not installed

D Because cors() middleware is not called before routes

💡 Hint

Middleware order matters in Express.

Middleware like cors() must be used before routes to set headers properly. If routes run first, CORS headers won't be set.

❓ state_output

expert

What is the output of this Express CORS preflight handling code?

What response headers will the server send when a browser sends an OPTIONS preflight request to this Express API? const express = require('express'); const app = express(); app.use((req, res, next) => { if (req.method === 'OPTIONS') { res.setHeader('Access-Control-Allow-Origin', 'https://example.com'); res.setHeader('Access-Control-Allow-Methods', 'GET,POST'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); return res.status(204).end(); } next(); }); app.get('/', (req, res) => res.send('OK')); // Assume a browser sends OPTIONS request from https://example.com

A Status 404 Not Found with no headers

B Status 200 with body 'OK' and no CORS headers

C Status 204 with headers: Access-Control-Allow-Origin: https://example.com, Access-Control-Allow-Methods: GET,POST, Access-Control-Allow-Headers: Content-Type

D Status 500 Internal Server Error due to missing next() call

💡 Hint

Preflight requests use OPTIONS method and expect specific CORS headers.

The code handles OPTIONS requests by sending status 204 with the correct CORS headers allowing the origin, methods, and headers.