How to proxy with Cloudflare

You can use Cloudflare with Framer to enable reverse proxying—ideal for advanced use cases like traffic management, custom routing, and compliance with infrastructure policies.

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 SettingsDomains. Add a free Framer subdomain to your site, such as example.framer.website.

Screenshot of Framer's domain settings interface showing the "Custom Domain" section. The interface displays two options: "Get a free Framer subdomain" (which is selected) and "Connect a domain you own." In the free subdomain section, there's a text field with "example" entered and a dropdown showing ".framer.website" with a checkmark button to confirm. Below that is the unselected option to connect a purchased domain with a field showing "www.site.com" as an example.

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.

Screenshot of Framer's Canonical URL settings interface. The dark-themed panel shows two options: 'Default' (with the site's Framer subdomain) and 'Advanced' (selected). The Advanced option allows entering a custom URL for proxy setup, with 'www.example.com' entered in the text field and a checkmark button to confirm the setting.

Configure your domain in Cloudflare

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

Cloudflare onboarding screen showing the 'Boost your site's speed and security' section. The interface displays a text field to enter a domain name (with 'example.com' as a placeholder), options for DNS record configuration including a recommended 'Quick scan for DNS records' option that's selected, and a section about controlling AI crawler access to the site. There's also a 'Follow learning path' button and an option to register a new domain.

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.

Screenshot of Cloudflare's DNS management interface showing the configuration for example.com. The interface displays a DNS record setup with an A record pointing to the IP address 192.0.2.1. The record is configured for the root domain (@) with proxy status enabled (indicated by an orange cloud icon) and TTL set to Auto. The interface includes options to search DNS records, add filters, and add new records.

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.

The Cloudflare dashboard's "Workers & Pages" section showing the interface for creating and managing serverless functions. The screen displays a worker named "curly-mode-e364" with no active requests, errors, or performance metrics, and no connected bindings. There's a blue "Create" button in the top right corner and options to add binding, view logs, and filter applications. The interface uses Cloudflare's dark theme.

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

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.

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