Configuring allowed origins in Express - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when a request from 'http://example.com' is made?

Given this Express server code configuring CORS origins, what will happen when a request comes from 'http://example.com'?

Express

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

const allowedOrigins = ['http://example.com', 'http://localhost:3000'];

app.use(cors({
  origin: function(origin, callback) {
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}));

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(3000);

A The request succeeds and the server responds with 'Hello World'.

B The request fails with a CORS error because 'http://example.com' is not allowed.

C The server crashes due to a syntax error in the CORS configuration.

D The request succeeds but the response is blocked by the browser due to missing headers.

💡 Hint

Check if 'http://example.com' is in the allowedOrigins array.

The origin 'http://example.com' is included in the allowedOrigins array, so the CORS middleware allows the request and the server responds normally.

📝 Syntax

intermediate

Which option correctly configures CORS to allow only 'http://myapp.com'?

Select the correct CORS middleware configuration to allow requests only from 'http://myapp.com'.

A app.use(cors({ origin: function(origin) { return origin === 'http://myapp.com'; } }));

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

C app.use(cors({ origin: 'http://myapp.com' }));

D app.use(cors({ origin: true }));

💡 Hint

Check the type expected for the origin option in the CORS middleware.

The origin option accepts a string for a single allowed origin. Option C correctly sets it to 'http://myapp.com'. Option C returns a boolean but the function should call a callback. Option C allows all origins.

🔧 Debug

advanced

Why does this CORS configuration block all requests?

Analyze the code below. Why does it block all cross-origin requests?

Express

const allowedOrigins = ['http://site1.com', 'http://site2.com'];

app.use(cors({
  origin: function(origin, callback) {
    if (allowedOrigins.indexOf(origin) >= 0) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}));

A The allowedOrigins array is empty, so no origins are allowed.

B The condition 'allowedOrigins.indexOf(origin)' returns 0 for the first origin, which is falsy, so it blocks it.

C The callback is never called, causing the request to hang.

D The origin parameter is undefined, so the check fails.

💡 Hint

Remember how JavaScript treats 0 in conditions.

The indexOf method returns 0 for the first element, which is falsy in JavaScript. The if condition fails for the first allowed origin, blocking it incorrectly. The condition should check for index >= 0.

❓ state_output

advanced

What is the value of 'allowedOrigins' after this code runs?

Consider this code snippet. What is the final value of the 'allowedOrigins' variable?

Express

let allowedOrigins = ['http://a.com', 'http://b.com'];

allowedOrigins.push('http://c.com');
allowedOrigins = allowedOrigins.filter(origin => origin !== 'http://b.com');

A ['http://a.com', 'http://c.com']

B ['http://b.com', 'http://c.com']

C ['http://a.com', 'http://b.com', 'http://c.com']

D ['http://a.com']

💡 Hint

Think about what filter does to the array.

The push adds 'http://c.com' to the array. The filter removes 'http://b.com', so the final array has 'http://a.com' and 'http://c.com'.

🧠 Conceptual

expert

Which statement best explains why configuring allowed origins is important in Express apps?

Why do developers configure allowed origins in Express applications using CORS middleware?

A To improve server performance by limiting the number of incoming requests from certain origins.

B To automatically authenticate users based on their origin domain.

C To enable the server to accept requests only from the same origin, blocking all cross-origin requests by default.

D To restrict which websites can make requests to the server, enhancing security by preventing unauthorized cross-origin access.

💡 Hint

Think about what CORS controls in web browsers.

CORS configuration controls which external websites can access server resources, protecting against unauthorized cross-origin requests. It is a security feature, not related to performance or authentication.