Reverse proxying places a service—like Cloudflare—between your site and visitors. This setup enables:

• Integration with internal infrastructure (e.g. firewalls or routing rules)

• Compliance with advanced logging or regulatory requirements

• Control over CDN, caching, or geographic traffic management

Reverse proxying is only recommended for users with specific infrastructure or policy needs, as Framer already handles many of these capabilities natively.

Note: Reverse proxying is available on Scale and Enterprise plans.

Set up your Framer site

To start, open your Framer project and navigate to Site Settings → Domains. Add a free Framer subdomain to your site, such as example.framer.website.

Next, scroll to the bottom of the Domains section to set a canonical URL. In the “Advanced” input, enter your custom domain (for example, example.com) and publish your site.

Configure your domain in Cloudflare

Log into Cloudflare and add your custom domain—for example, example.com.

Next, go to your DNS settings and point either the root (@) or a subdomain like app.example.com to a dummy A record such as 192.0.2.1.

Create a Cloudflare Worker

In the Cloudflare dashboard, navigate to Workers & Pages and select Create to set up a new Worker. Then, assign a route to your Worker—something like example.com/*—so it can handle all incoming traffic.

Use the following code in your Worker to forward requests to your Framer subdomain. Replace the example URL with your actual Framer domain:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  return fetch('https://my-company.framer.website' + url.pathname + url.search, {
    method: request.method,
    headers: request.headers,
    body: request.body,
  });
}

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  return fetch('https://my-company.framer.website' + url.pathname + url.search, {
    method: request.method,
    headers: request.headers,
    body: request.body,
  });
}

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  return fetch('https://my-company.framer.website' + url.pathname + url.search, {
    method: request.method,
    headers: request.headers,
    body: request.body,
  });
}

Verify your setup

1. Ensure your Worker is assigned to the correct domain route.

2. Wait a few minutes for changes to propagate.

3. Use developer tools or an HTTP header inspector to confirm that traffic is routed through Cloudflare.

Important: Please also turn off the ”Rocket Loader” feature (Speed → Optimization → Content optimizations). Framer’s JavaScript is already optimized to load as fast and efficient as possible.

If you encounter any issues or need further assistance, feel free to contact Framer’s support team through our contact page.

See also our built-in hosting features Multi Site rewrites and Custom Headers.