Share
Explore

Guide: How to Reverse Proxy with Cloudflare Workers

A guide to using Cloudflare as a reverse proxy with multiple Webflow sites
Configuring Webflow hosting and your DNS Records
In order to use Cloudflare as a reverse proxy you’ll need to make some changes to your DNS records and get your Webflow projects configured properly.

Since we’ll be using Cloudflare’s reverse proxy (keeping those clouds orange in Cloudflare which Webflow doesn’t officially support), you’ll want to make sure to head over to your project settings for your main dot com project in Webflow and turn SSL off.

Set up your domains to take advantage of CNAME flattening and set your naked domain as the default. Then, in Cloudflare instead of using proxy-ssl.webflow.com as your CNAME values, use proxy.webflow.com for both and make sure the clouds for these records are on and you’re using Cloudflare’s proxy.

⚠️ IMPORTANT This switch will cause Cloudflare to make a request to Let’s Encrypt (LE) to get a new SSL certificate setup. Webflow also uses LE for SSL certificates so you’ll want to use or the to make sure you aren’t going to hit the LE rate limit. If you do hit this rate limit you’re prevented from pulling a cert for a week.

Configuring the Webflow project settings of your secondary project
For the secondary project that you’ll be proxying to a directory of the main dot com project, you’ll need to set up some things there as well.

Webflow doesn’t allow you to proxy a site on the webflow.io domain, so you’ll need to jump into your Dashboard and add a hosting plan for this project and add a custom domain you can proxy. Something like proxy.domain.com or project.domain.com. Again, for this project you’ll want to make sure and turn SSL off and use proxy.webflow.com for your CNAME. Make sure the orange cloud is on in Cloudflare and that you’re using their proxy for this domain.

Next head on over to the SEO tab in your secondary project settings and scroll to the bottom of the page and set your . For example, if your domain is domain.com and you’re adding a blog at domain.com/blog you’ll want your canonical tag to be https://domain.com/blog.

Then, head over to the Custom Code tab of your secondary project settings. Scroll to the bottom and you’ll need to set your base tag. As in the example above, it’ll need to be https://domain.com/blog. You’ll also need to set your Href Prefix to /blog. Save the changes and publish the site.

Configuring the Webflow page settings of your secondary project
Once your project settings are configured, you’ll need to setup a snippet of code on each page that’s being reverse-proxied, so that Google knows which page is the original.

Let’s say we were working on a Blog Index page (a static page with CMS collections on it) that needs to live on

Head over to the Blog index page (the page in question) on your secondary project, click the Page Settings, and add the following line of code to your website:

<link rel="canonical" href="https://domain.com/blog" />

This snippet of code will need to be added for every page that you have that’s being reverse-proxied. For CMS pages (like an individual blog page), you can dynamically choose the slug in the Custom Code settings, as seen below.

image.png


Add a worker in your Cloudflare dashboard
In your Cloudflare dashboard, click on Workers in the sidebar:

image.png

Once you’re on the Workers page, click on the Create a Worker button.

image.png

Name your new proxy by clicking on the name in the top left hand corner. Use site-proxy or whatever works for you. Next erase all the code in the box on the left, and replace it with the following code.

addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
// new URL object to play with,
// based on the one being requested.
// e.g. https://domain.com/blog/page
var url = new URL(request.url)
// set hostname to the place we're proxying requests from
url.hostname = "blog.domain.com"

// remove the first occurence of /blog
// so it requests / of the proxy domain
url.pathname = url.pathname.replace('/blog', '')
// pass the modified url back to the request,
let response = await fetch(url, request)
return response;
}

You’ll want to replace blog.domain.com with whatever subdomain you’re using for your secondary project. If all of the above DNS changes have fully propagated, then you should be able to see your blog from your secondary project loading in the preview on the right. You should be able to navigate without issue and see content loading. Or, if you’re in the HTTP tab you should be seeing 🟢 200 OK as your status.

If this is the case, you can hit the Save and Deploy button to deploy your code.

Now you need to bind this worker to your domain and setup your route. Go back to your Cloudflare dashboard and click on your domain, then click on the Workers icon in the top menu.

Click on the Add Route button and you’ll be presented with a modal. For the route you’ll need to add domain.com/blog*. It’s important that the asterisk is there since it works as a wild card to match the incoming requests.

For the worker, select the name of the worker you just created. Click Save.

Now you should be able to head to domain.com and see your main dot com site load secure as usual. And, if you head over to domain.com/blog you should see your blog being proxied and working as well. If you plan on having a shared navigation you’ll need to do some work to ensure all of the links work as expected.


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.