Configuring a Proxy with Cloudflare

Using a Framer site with Cloudflare enables reverse proxy configuration. This is suitable for advanced use cases such as traffic management, custom routing, and compliance with infrastructure policies.

A reverse proxy is a method where a service like Cloudflare is placed between your site and its visitors. It allows you to do the following:

• Integration with internal infrastructure (e.g., firewall, routing rules)

• Advanced logging and regulatory compliance

• Control over CDN, caching, and region-specific traffic management

However, since Framer offers many features on its own, it's recommended to use a reverse proxy only when specific infrastructure or policy needs exist.
Note: Reverse proxy is only available on Scale and Enterprise plans.

Setting Up Your Framer Site

1. Open your Framer project and go to Site Settings → Domains.

2. Add a free Framer subdomain (e.g., example.framer.website)

3. Scroll to the bottom of the Domains section to set up the Canonical URL.
   Example: Enter a custom domain example.com in the “Advanced” field and publish the site.

Setting Up Your Domain on Cloudflare

1. Log in to Cloudflare and add your custom domain (e.g., example.com).

2. Go to DNS settings and specify the root (@) or subdomain (app.example.com) as a dummy A record (e.g., 192.0.2.1).

Note: In the Cloudflare DNS management screen, the A record points to 192.0.2.1 and the proxy status is set to active (orange cloud icon).

Creating a Cloudflare Worker

1. Navigate to Workers & Pages in the Cloudflare dashboard and create a new Worker.

2. Specify the route to handle all traffic. Example: example.com/*

3. Enter the Worker code: Replace my-company.framer.website with your actual Framer domain in the example below.

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,
  });
}

Checking Your Settings

• Ensure the Worker is connected to the correct domain route.

• Note that it may take a few minutes for changes to apply.

• Use browser developer tools or HTTP header inspection tools to verify that traffic is being routed through Cloudflare.

• If you encounter issues or need assistance, contact Framer Support.

This article is a translated and adapted version of Framer's official blog content ‘How to proxy with Cloudflare’.