How to add custom hostname for multi tenant application with cloudflare pages?

In order to have multi tenant support for cloudflare pages I followed this steps.

Step 1:
Deploy the application to cloudflare pages and set custom domain

Step 2:
Wrote a simple cloudflare worker proxy

// src/index.ts
var src_default = {
  async fetch(request, env, ctx) {
    const newRequest = new Request(request);
    let url = new URL(request.url);

    newRequest.headers.set("x-company-id", url.hostname)
    url.hostname = '';

    return fetch(url.toString(), newRequest)
export {
  src_default as default

Step 3:
Added the worker route as on different domain


I chose a seperate domain for multi tenant apps, so that its easier to maintain the CNAME if later on I wanted to add subdomains to my primary domain

Another reason was that having a seperate domain makes it easier to have a proxy worker route for only purpose of multitenant.

( Please do suggest if there is a better approach, if I could use the existing domain for this)

Now From this step onwards, things are getting a little of confusing to me

Step 4:
I added a wildcard record to DNS

AAAA * 100:: Proxied

Step 5:
Enabled Custom Hostnames for

Step 6:
Added custom hostname

Step 7:
I didnt understand this part

For Custom Hostnames you want to use the route */*:

The rest of your setup makes sense to me, what are you getting stuck on and what do you see when you access the site currently?

I was getting 522 error and in some cases it was 1016, as I was doing trial and error

This is a simple diagram I tried to put, on what configurations I did