Understanding Proxies: Forward vs Reverse

🚀 Introduction

Whether you're building modern web apps or exploring computer networking as a CS student or developer, you've likely encountered proxy servers—especially while dealing with CORS errors or setting up dev environments.

But what exactly is a proxy server? Why are there forward and reverse proxies? And how do you use one effectively in a React (Vite) app?

Let's break it all down — the what, why, and how, with developer-friendly explanations and real-world setups.

🧠 What is a Proxy Server?

A proxy server acts as an intermediary between a client (like your browser or frontend app) and a destination server (like an API or a website). Instead of sending your request directly to the target, your request first goes to the proxy, which forwards it to the actual server.

Think of it as a digital middleman that routes your traffic behind the scenes.

🔀 Types of Proxies: Forward vs Reverse

➤ 1. Forward Proxy

• 📍 Position: Between the client and the internet/server
• 📥 Use Case: Helps clients access resources indirectly (common in schools, organizations, or VPNs)

💡 Examples:

• A university blocks YouTube, but you use a forward proxy to access it
• You use a proxy in development to bypass CORS errors when calling external APIs

🖼️ Visual Flow:

1Client → [Forward Proxy] → Server

➤ 2. Reverse Proxy

• 📍 Position: Between the internet/client and the server
• 📤 Use Case: Routes incoming requests to appropriate backend services, load balances traffic, hides internal services

💡 Examples:

• Nginx receives traffic at example.com/api and forwards it to your Node.js API server
• Used in microservices architecture, CDN, or API gateways

🖼️ Visual Flow:

1Client → [Reverse Proxy] → Multiple Internal Servers

🧑‍💻 Why Proxies Matter for Developers

As a frontend dev or full-stack engineer, you may use proxies to:

• Avoid CORS issues in development
• Route API calls through a local server
• Keep environment configurations clean
• Simulate real-world API architecture

⚙️ Proxy Setup in React (Vite)

Let's say you have a React app created with Vite and a backend API running at http://localhost:5000. You want to fetch data from /api/users.

🧪 Problem:

If your frontend is on localhost:5173, calling fetch('http://localhost:5000/api/users') will trigger a CORS error.

✅ Solution: Use Vite's Dev Proxy (Forward Proxy)

Vite provides a clean proxy option in vite.config.js.

🔧 Step-by-Step Setup

1. Modify vite.config.js:

1// vite.config.js
2import { defineConfig } from 'vite'
3import react from '@vitejs/plugin-react'
4
5export default defineConfig({
6  plugins: [react()],
7  server: {
8    proxy: {
9      '/api': {
10        target: 'http://localhost:5000', // Your backend server
11        changeOrigin: true,
12        rewrite: path => path.replace(/^\/api/, '')
13      }
14    }
15  }
16})

2. Fetch API in your frontend:

1// src/App.jsx
2import { useEffect, useState } from 'react'
3
4function App() {
5  const [users, setUsers] = useState([])
6
7  useEffect(() => {
8    fetch('/api/users') // This will be forwarded to http://localhost:5000/users
9      .then(res => res.json())
10      .then(data => setUsers(data))
11  }, [])
12
13  return (
14    <div>
15      <h1>Users</h1>
16      <ul>
17        {users.map((user, i) => <li key={i}>{user.name}</li>)}
18      </ul>
19    </div>
20  )
21}
22
23export default App

3. Start your backend and frontend:

1# Backend on port 5000
2# Frontend on port 5173
3npm run dev

✅ Done! You've just set up a forward proxy using Vite!

🔁 What About Reverse Proxy?

While Vite helps during development, reverse proxies like Nginx or Apache are often used in production to:

• Serve React app statically
• Forward /api/* calls to the backend server
• Provide SSL termination (HTTPS)
• Load balance between multiple backends

🌐 Sample Nginx Config for React + Node:

1server {
2  listen 80;
3  server_name yourdomain.com;
4
5  location / {
6    root /var/www/react-app;
7    index index.html;
8    try_files $uri /index.html;
9  }
10
11  location /api/ {
12    proxy_pass http://localhost:5000/;
13    proxy_http_version 1.1;
14    proxy_set_header Upgrade $http_upgrade;
15    proxy_set_header Connection 'upgrade';
16    proxy_set_header Host $host;
17    proxy_cache_bypass $http_upgrade;
18  }
19}

💬 Common Questions

❓ Why not call the backend directly from React?

Because of CORS restrictions. Browsers prevent JS from calling a different origin. A proxy acts as a workaround.

❓ Can I use reverse proxy in development?

You can, but it's overkill. Vite's forward proxy is optimized for DX (Developer Experience).

📚 Summary

🧩 Bonus: Debugging Tips

• Use console.log(req.headers) on backend to inspect forwarded headers
• Use browser dev tools → Network tab → check if /api/* is being redirected
• Use tools like http-proxy-middleware if using CRA instead of Vite

📌 Final Thoughts

Understanding proxies is a crucial skill for every web developer and computer science student. Whether you're fixing a CORS issue or deploying to production, proxies are your silent helpers behind the scenes.

✅ Start with forward proxy in Vite, then explore reverse proxies like Nginx for production-level control.

If you found this blog helpful, do share it with your developer friends. Got questions or feedback related to the topic? Drop them in the comments — I'd love to discuss!

Stay tuned for more such deep-dives. Until then, keep building and keep learning.