A/B testing with middleware

Set up an A/B test by controlling what page is served based on cookies. This version supports passing the request through to test and control on the origin.

Last updated Oct 10, 2026

const cookieName = "ab-test-cookie";
const newHomepagePathName = "/test";

const abTest = async (context) => {
    const url = new URL(context.request.url);
    // if homepage
    if (url.pathname === "/") {
        // if cookie ab-test-cookie=new then change the request to go to /test
        // if no cookie set, pass x% of traffic and set a cookie value to "current" or "new"

        let cookie = context.request.headers.get("cookie");
        // is cookie set?
        if (cookie && cookie.includes(`${cookieName}=new`)) {
            // pass the request to /test
            url.pathname = newHomepagePathName;
            return context.env.ASSETS.fetch(url);
        } else {
            const percentage = Math.floor(Math.random() * 100);
            let version = "current"; // default version
            // change pathname and version name for 50% of traffic
            if (percentage < 50) {
                url.pathname = newHomepagePathName;
                version = "new";
            }
            // get the static file from ASSETS, and attach a cookie
            const asset = await context.env.ASSETS.fetch(url);
            let response = new Response(asset.body, asset);
            response.headers.append("Set-Cookie", `${cookieName}=${version}; path=/`);
            return response;
        }
    }
    return context.next();
};

export const onRequest = [abTest];

Was this helpful?

YesNo

On this page

A/B testing with middleware - 图1Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/pages/functions/examples/ab-testing/#page","headline":"A/B testing with middleware","description":"Set up an A/B test by controlling what page is served based on cookies. This version supports passing the request through to test and control on the origin.","url":"https://developers.cloudflare.com/pages/functions/examples/ab-testing/","inLanguage":"en","image":"https://developers.cloudflare.com/pages/functions/examples/ab-testing/og.png?v=4e99f7cbe7eeb7b9","dateModified":"2026-10-10","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: A Pages Functions for appending CORS headers. title: Adding CORS headers image: https://developers.cloudflare.com/pages/functions/examples/cors-headers/og.png?v=b97a60e1ac436b01

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/pages/llms.txt
Use this file to discover all available pages before exploring further.