The simplest form reverse proxy worker
If you want to deliver the contents from, for example, mydocssite.com
on the URL mypublicwebsite.com/docs/
– a simple Cloudflare workers reverse proxy might do the trick.
- Requires the origin to be configured with the public URL, in this example
https://mypublicwebsite.com/docs
- Works for GET requests (meaning, you can for example not log in or submit forms)
const DOMAIN = 'mypublicwebsite.com'; //
const PROXYPATH = 'docs'; // path to be proxied
const ORIGIN = 'mydocssite.com'; // where to fetch content from
addEventListener('fetch', event => {
var url = new URL(event.request.url);
if (url.pathname.startsWith('/' + PROXYPATH + '/') || url.pathname === '/' + PROXYPATH) {
handleRequest(event, url);
} else {
event.respondWith(fetch(event.request));
}
})
async function handleRequest(event, url) {
// Change URL from public URL to use the origin URL
var originUrl = url.toString().replace(
'https://' + DOMAIN + '/' + PROXYPATH,
'https://' + ORIGIN
);
event.passThroughOnException();
event.respondWith(fetch(originUrl));
}
After creating this worker in the Cloudflare workers dashboard for your public domain, in this example mypublicwebsite.com, you need to assign a route. That will tell Cloudflare to trigger your worker, when requests are sent to /docs/*
.
If your origin is running a WordPress installation, you should configure it to use mypublicwebsite.com/docs
as the site URL. With this correctly set up, a request to mypublicwebsite.com/docs/article-1/
will be fetched from mydocssite.com/article-1/
.
Conditional routing
Conditional routing is another way to use a reverse proxy. It is a lot easier and more flexible to implement logic on the network edge in a JavaScript worker, than to configure it in the configuration files of the server, or even within your PHP applications.