Using Cloudflare Workers as a Reverse Proxy for Web Applications

Cloudflare Workers is a serverless compute platform that allows you to run JavaScript at the edge, bringing your code closer to the users. With its ability to intercept HTTP requests, process them, and return responses, Cloudflare Workers can be used for a variety of purposes. One of the most powerful use cases is using it as a reverse proxy for web applications.

A reverse proxy is a server that sits between the client and the web server, forwarding client requests to the appropriate server and returning the responses to the client. Using Cloudflare Workers as a reverse proxy provides flexibility and performance benefits, allowing you to manage traffic, apply security features, and optimize application delivery.

Contents show

Setting Up Cloudflare Workers as a Reverse Proxy

To set up Cloudflare Workers as a reverse proxy, follow these steps:

1. **Create a Worker**
First, log into your Cloudflare account and navigate to the “Workers” section. Create a new Worker and open the code editor.

2. **Configure the Proxy Logic**
The core logic of your reverse proxy is handled in JavaScript. Here’s an example of how to define the reverse proxy logic:

javascript
addEventListener(‘fetch’, event => {
event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
const url = new URL(request.url);
// Define the destination server (the server to which requests are forwarded)
const targetUrl = https://example.com${url.pathname}${url.search};

// Forward the request to the target server
const response = await fetch(targetUrl, {
method: request.method,
headers: request.headers,
body: request.method === ‘POST’ ? request.body : undefined,
});

// Return the response from the destination server
return response;
}
In this code:
The fetch event listener captures all incoming HTTP requests.
The handleRequest function processes the request and forwards it to the target server.
The URL of the incoming request is parsed, and a new URL is constructed to point to the backend server.

Handling Headers and Modifying Requests

When working with a reverse proxy, it’s crucial to manage headers correctly. Cloudflare Workers provides full access to HTTP headers, which allows you to modify requests and responses. For example, you can add custom headers to requests or modify the response headers before they are returned to the client.
Here’s an example of modifying the headers before forwarding the request:
javascript
async function handleRequest(request) {
const url = new URL(request.url);
const targetUrl = https://example.com${url.pathname}${url.search};

const modifiedHeaders = new Headers(request.headers);
modifiedHeaders.set(‘X-Custom-Header’, ‘Value’);

const response = await fetch(targetUrl, {
method: request.method,
headers: modifiedHeaders,
body: request.method === ‘POST’ ? request.body : undefined,
});

return response;
}
In this example, a custom header (X-Custom-Header) is added to the request before forwarding it. Similarly, you can modify response headers in the response object.

Load Balancing and Failover

One of the key benefits of using a reverse proxy is load balancing. Cloudflare Workers can be used to distribute traffic between multiple backend servers, ensuring that no single server is overwhelmed with too many requests.
Here’s a basic implementation of round-robin load balancing:
javascript
const backendServers = [
‘https://backend1.example.com’,
‘https://backend2.example.com’,
‘https://backend3.example.com’
];
let currentServerIndex = 0;

async function handleRequest(request) {
const url = new URL(request.url);
const targetUrl = ${backendServers[currentServerIndex]}${url.pathname}${url.search};

currentServerIndex = (currentServerIndex + 1) % backendServers.length;

const response = await fetch(targetUrl, {
method: request.method,
headers: request.headers,
body: request.method === ‘POST’ ? request.body : undefined,
});

return response;
}
This code alternates between multiple backend servers with each request, helping to distribute the traffic. You can expand this approach to implement more sophisticated load balancing strategies, such as weighted load balancing or health-check-based routing.

Security Features with Cloudflare Workers

When using Cloudflare Workers as a reverse proxy, you gain access to several built-in security features provided by Cloudflare. These include rate limiting, IP filtering, and caching, among others.
To apply rate limiting, you can use the KV storage in Cloudflare Workers to track request counts. Here’s an example of how you could implement a simple rate limiter:
javascript
const RATE_LIMIT = 100; // Requests per minute
const RATE_LIMIT_KEY = ‘rate_limit’;

async function handleRequest(request) {
const ip = request.headers.get(‘CF-Connecting-IP’);
const currentTime = Date.now();

const rateLimitData = await RATE_LIMIT_KV.get(ip);

if (rateLimitData) {
const { count, timestamp } = JSON.parse(rateLimitData);
if (currentTime – timestamp < 60000 && count >= RATE_LIMIT) {
return new Response(‘Rate limit exceeded’, { status: 429 });
}
}

await RATE_LIMIT_KV.put(ip, JSON.stringify({
count: (rateLimitData ? JSON.parse(rateLimitData).count : 0) + 1,
timestamp: currentTime
}));

const targetUrl = https://example.com${new URL(request.url).pathname};
const response = await fetch(targetUrl, request);
return response;
}
This example uses Cloudflare’s KV (Key-Value) storage to track the number of requests made by each IP address. If a client exceeds the allowed number of requests per minute, the worker responds with a 429 status (Too Many Requests).

Performance Optimization with Caching

Cloudflare Workers allow you to cache responses at the edge, reducing the load on your origin servers and improving response times. To implement caching in a reverse proxy setup, you can use the Cache API.
javascript
async function handleRequest(request) {
const cache = caches.default;
const cachedResponse = await cache.match(request);

if (cachedResponse) {
return cachedResponse;
}

const url = new URL(request.url);
const targetUrl = https://example.com${url.pathname}${url.search};

const response = await fetch(targetUrl, {
method: request.method,
headers: request.headers,
body: request.method === ‘POST’ ? request.body : undefined,
});

// Cache the response for future requests
cache.put(request, response.clone());

return response;
}
In this implementation, if the requested resource is found in the cache, it is returned immediately. Otherwise, the request is forwarded to the target server, and the response is cached for future use.
html