Nginx as reverse proxy in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when Nginx is set as a reverse proxy for an Express app?

Consider an Express app running on port 3000. Nginx is configured to forward requests from port 80 to this app. What is the visible effect when a user accesses the server's IP on port 80?

Express

server {
  listen 80;
  location / {
    proxy_pass http://localhost:3000;
  }
}

A The user sees the Express app response as if directly accessing port 3000.

B The user gets a 404 error because Nginx blocks all requests.

C The user sees the Nginx default welcome page instead of the Express app.

D The user is redirected to port 3000 in the browser URL.

💡 Hint

Think about what a reverse proxy does with incoming requests.

Nginx forwards requests from port 80 to the Express app on port 3000, so the user sees the app response transparently.

📝 Syntax

intermediate

Identify the correct Nginx proxy_pass syntax for forwarding to Express

Which Nginx configuration snippet correctly forwards all requests to an Express app running on localhost port 4000?

A location / { proxy_pass http://:4000; }

B location / { proxy_pass localhost:4000; }

C location / { proxy_pass http://localhost4000; }

D location / { proxy_pass http://localhost:4000; }

💡 Hint

Remember the full URL format for proxy_pass.

The proxy_pass directive requires a full URL including the protocol (http://) and hostname with port.

🔧 Debug

advanced

Why does the Express app receive incorrect client IP behind Nginx reverse proxy?

An Express app behind Nginx reverse proxy logs the client IP as 127.0.0.1 instead of the real user IP. What is the cause?

A Nginx is not forwarding the original client IP in the X-Forwarded-For header.

B Express app is not listening on the correct port.

C Nginx is caching the responses causing IP mismatch.

D Express app has a syntax error in the logging middleware.

💡 Hint

Think about how proxies pass client IP information.

Nginx must forward the original client IP using headers like X-Forwarded-For. Without this, Express sees the proxy's IP (localhost).

❓ state_output

advanced

What is the value of req.protocol in Express behind Nginx reverse proxy with HTTPS?

Nginx terminates HTTPS and proxies requests to Express over HTTP. In Express, what is the value of req.protocol by default?

A Throws an error due to protocol mismatch.

B "https" because the original request was HTTPS.

C "http" because Express receives plain HTTP from Nginx.

D Undefined because protocol is not set.

💡 Hint

Consider what Express actually receives from Nginx.

Express sees the protocol of the direct connection, which is HTTP from Nginx, so req.protocol is "http" unless trust proxy is enabled.

🧠 Conceptual

expert

How to correctly configure Express to trust Nginx reverse proxy for secure cookies?

You want to set secure cookies in Express behind Nginx reverse proxy that terminates HTTPS. Which Express setting ensures cookies are marked secure correctly?

A Set <code>app.set('trust proxy', false)</code> to disable proxy trust.

B Set <code>app.set('trust proxy', 1)</code> to trust the first proxy.

C Set <code>app.enable('trust proxy')</code> without arguments.

D No Express setting needed; Nginx handles cookies.

💡 Hint

Think about how Express determines if a request is secure behind a proxy.

Setting app.set('trust proxy', 1) tells Express to trust the first proxy and use forwarded headers to detect HTTPS, enabling secure cookies.

Practice

1. What is the main role of Nginx when used as a reverse proxy for an Express app?

easy

A. It compiles the Express app code before running.

B. It replaces the Express app and handles all business logic.

C. It stores the database for the Express app.

D. It forwards client requests to the Express server and sends back responses.

Solution

1. Step 1: Understand the role of a reverse proxy

   A reverse proxy receives client requests and forwards them to a backend server, then returns the server's response to the client.

2. Step 2: Apply this to Nginx and Express

   Nginx acts as this middleman, forwarding requests to the Express app and sending back responses, improving security and performance.

3. Final Answer:

   It forwards client requests to the Express server and sends back responses. -> Option D

4. Quick Check:

   Reverse proxy = forwards requests [OK]

Hint: Remember: reverse proxy passes requests, doesn't replace app [OK]

Common Mistakes:

• Thinking Nginx replaces Express app logic
• Confusing reverse proxy with database
• Assuming Nginx compiles code

2. Which Nginx configuration snippet correctly sets up a reverse proxy to an Express app running on port 3000?

easy

A. proxy_pass https://localhost:3000;

B. proxy_pass http://localhost:3000;

C. proxy_pass ftp://localhost:3000;

D. proxy_pass file://localhost:3000;

Solution

1. Step 1: Identify the correct protocol for Express app

   Express apps usually run over HTTP, so the proxy_pass URL must start with http://

2. Step 2: Check the options

   proxy_pass http://localhost:3000; uses http://localhost:3000 which is correct; others use wrong protocols like https, ftp, or file.

3. Final Answer:

   proxy_pass http://localhost:3000; -> Option B

4. Quick Check:

   Express uses HTTP, so proxy_pass must use http:// [OK]

Hint: Use http:// for Express app URLs in proxy_pass [OK]

Common Mistakes:

• Using https:// without SSL setup
• Using unsupported protocols like ftp://
• Confusing file paths with URLs

3. Given this Nginx config snippet inside server block:

location /api/ {
  proxy_pass http://localhost:3000/;
}

What happens when a client requests /api/users?

medium

A. Nginx forwards the request to http://localhost:3000/ only.

B. Nginx forwards the request to http://localhost:3000/api/users.

C. Nginx forwards the request to http://localhost:3000/users.

D. Nginx returns a 404 error immediately.

Solution

1. Step 1: Understand proxy_pass with trailing slash

   When proxy_pass URL ends with a slash, Nginx replaces the matching location prefix with the path after the slash.

2. Step 2: Apply to /api/users request

   The location /api/ matches, so /api/ is replaced by /, forwarding to http://localhost:3000/users.

3. Final Answer:

   Nginx forwards the request to http://localhost:3000/users. -> Option C

4. Quick Check:

   Trailing slash in proxy_pass replaces location prefix [OK]

Hint: Trailing slash in proxy_pass removes location prefix [OK]

Common Mistakes:

• Assuming proxy_pass appends full path including /api/
• Confusing behavior with or without trailing slash
• Expecting 404 without backend check

4. You configured Nginx as reverse proxy but get a 502 Bad Gateway error. Which is the most likely cause?

medium

A. Express app is not running or not reachable on the specified port.

B. Nginx configuration file has a syntax error unrelated to proxy_pass.

C. Client browser does not support HTTP/2.

D. Express app is running but has no routes defined.

Solution

1. Step 1: Understand 502 Bad Gateway meaning

   502 means Nginx cannot connect to the backend server (Express app) to get a valid response.

2. Step 2: Identify common causes

   If Express is not running or listening on the wrong port, Nginx cannot forward requests, causing 502 errors.

3. Final Answer:

   Express app is not running or not reachable on the specified port. -> Option A

4. Quick Check:

   502 = backend unreachable [OK]

Hint: Check if Express app is running to fix 502 errors [OK]

Common Mistakes:

• Blaming client browser for server errors
• Ignoring backend server status
• Assuming syntax errors always cause 502

5. You want Nginx to serve static files directly and forward API requests to Express on port 4000. Which Nginx config snippet correctly achieves this?

hard

A. location /static/ { root /var/www/html; }
location /api/ { proxy_pass http://localhost:4000/; }

B. location /api/ { root /var/www/html; }
location /static/ { proxy_pass http://localhost:4000/; }

C. location / { proxy_pass http://localhost:4000/; }
location /static/ { proxy_pass http://localhost:4000/; }

D. location /static/ { proxy_pass http://localhost:4000/; }
location /api/ { root /var/www/html; }

Solution

1. Step 1: Serve static files directly

   Static files under /static/ should be served from disk using root directive.

2. Step 2: Forward API requests to Express

   Requests to /api/ should be proxied to Express running on port 4000.

3. Step 3: Match configuration to requirements

   location /static/ { root /var/www/html; } location /api/ { proxy_pass http://localhost:4000/; } correctly sets /static/ to serve files and /api/ to proxy_pass Express.

4. Final Answer:

   location /static/ { root /var/www/html; } location /api/ { proxy_pass http://localhost:4000/; } -> Option A

5. Quick Check:

   Static served by root, API proxied to Express [OK]

Hint: Static files use root, API uses proxy_pass [OK]

Common Mistakes:

• Swapping static and API locations
• Using proxy_pass for static files
• Serving API requests from file root