This document was created to help local users who face challenges due to the lack of Korean resources for learning Framer. It translates content from the official blog into Korean and includes additional practical information. We hope it provides some assistance to those using Framer.

When using Framer with Cloudflare, you can enable Reverse proxying. This method is suitable for use cases requiring advanced configurations such as traffic management, custom routing, and adherence to infrastructure policies.

A reverse proxy places a service like Cloudflare between your site and its visitors, offering the following benefits:

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

• Advanced logging or compliance with regulatory requirements

• CDN, caching, and regional traffic management control

Reverse proxying is recommended only for users who need specific infrastructure or policies since Framer already provides many features by default.

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

Setting up Framer Site

First, open your Framer project and navigate to Site Settings → Domains. Then, add a free Framer subdomain to your site (e.g., example.framer.website).

Next, configure the Canonical URL at the bottom of the Domains section. Enter your custom domain in the Advanced input field (e.g., example.com) and publish the site.

Configuring the Domain in Cloudflare

After logging into Cloudflare, add your custom domain (e.g., example.com).

Then, navigate to the DNS settings. Assign a dummy A record 192.0.2.1 to a root (@) or subdomain like app.example.com.

Creating a Cloudflare Worker

Go to Workers & Pages in the Cloudflare dashboard and click Create to create a new Worker. Then, specify the route (e.g., example.com/*). This lets the Worker handle all incoming traffic.

Put the following code into the Worker to forward requests to the 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,
  });
}

Checking the Setup

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

• Note that changes may take a few minutes to take effect.

• Use developer tools or an HTTP header inspection tool to verify traffic is passing through Cloudflare.

If you encounter any issues or need further assistance, please contact Framer's support team.

This article is an adapted translation of Framer's official blog post ‘How to proxy with Cloudflare’.