YARP — Reverse Proxy

1. Definition

A Reverse proxy is a server setting in the front of an application servers and distributes client requests across multiple servers. The Reverse Proxy can rewrite the URLs.

2. API Geteway vs Reverse Proxy

— Reverse Proxy

A reverse proxy is a traffic router. It forwards incoming requests to backend servers.

Main job: “Send this request to the correct server.”

— API Gateway

An API gateway is a reverse proxy + API-specific features.

It routes requests and adds features commonly needed for APIs, such as:

• Authentication & authorization
• Rate limiting
• Logging & monitoring

3. Demo

• React dev server → [http://localhost:3000](http://localhost:3000)
• YARP Api→ [http://localhost:5000](http://localhost:5000)
• Backend API → [http://localhost:5001](http://localhost:5001)

— Yarp API Project(ASP.NET Core Empty):

Install package: Yarp.ReverseProxy

— Program.cs :

var builder = WebApplication.CreateBuilder(args);

// Add YARP and load config from appsettings.json
builder.Services.AddReverseProxy()
    .LoadFromConfig(builder.Configuration.GetSection("ReverseProxy"));

builder.Services.AddControllers();

var app = builder.Build();

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

// Activate the proxy middleware
app.MapReverseProxy();

app.Run();

— Appsettings.json :

{
  "Kestrel": {
    "Endpoints": {
      "Http": {
        "Url": "http://localhost:5000"
      }
    }
  },
  "ReverseProxy": {
    "Routes": {
      "users-route": {
        "ClusterId": "backend-cluster",
        "Match": {
          "Path": "/api/{**catch-all}"
        }
      }
    },
    "Clusters": {
      "backend-cluster": {
        "Destinations": {
          "backend1": {
            "Address": "http://localhost:5001/"
          }
        }
      }
    }
  }
}

— Backend Api Project

Add one controller :

[Route("api/[controller]")]
[ApiController]
public class UsersController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        var users = new[]
        {
        new { id = 1, name = "Alice" },
        new { id = 2, name = "Bob" }
    };
        return Ok(users);
    }
}

AppSettings.cs :

{
  "Kestrel": {
    "Endpoints": {
      "Http": {
        "Url": "http://localhost:5001"
      }
    }
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

— React App

Update Package.json :

// ReactFront/package.json (partial)
{
  "name": "reactfront",
  ...
  "proxy": "http://localhost:5000",
  ...
}

In App.js , we call the gateway

// ReactFront/src/App.js
import React, { useEffect, useState } from "react";

function App() {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        // Call the gateway — because of package.json "proxy" this becomes http://localhost:5000/api/users in dev
        fetch("/api/users")
            .then(res => {
                if (!res.ok) throw new Error(res.statusText);
                return res.json();
            })
            .then(data => setUsers(data))
            .catch(err => {
                console.error("Fetch error:", err);
                setUsers([]);
            });
    }, []);

    return (
        <div style={{ padding: 20 }}>
            <h1>Users</h1>
            <ul>
                {users.map(u => (
                    <li key={u.id}>{u.name} (id: {u.id})</li>
                ))}
            </ul>
        </div>
    );
}

export default App;