Force trailing slashes

README.md

Force Trailing Slashes

This example show how to force trailing slashes using a custom _worker.js file in your Cloudflare Pages project.

Usage

Copy the _worker.js file into your project's build output directory.

Behaviour

For requests to URLS without a trailing slash that would ordinarily serve an HTML asset, we redirect the request to the URL with a trailing slash.

For requests to URLs with a trailing slash, we flatten the default redirect (which would ordinarily strip the trailing slash) and serve the resulting page.

Examples

For the file /foo.html:

• https://forcing-trailing-slashes.pages.dev/foo redirects to https://forcing-trailing-slashes.pages.dev/foo/
• https://forcing-trailing-slashes.pages.dev/foo/ serves /foo.html

For the file /bar/index.html:

• https://forcing-trailing-slashes.pages.dev/bar redirects to https://forcing-trailing-slashes.pages.dev/bar/
• https://forcing-trailing-slashes.pages.dev/bar/ serves /bar/index.html

For the file /bin:

• https://forcing-trailing-slashes.pages.dev/bin serves /bin
• https://forcing-trailing-slashes.pages.dev/bin/ does 404 behavior (404 /404.html if exists else 200 /index.html)

For the file /index.html:

• https://forcing-trailing-slashes.pages.dev/ serves /index.html
• https://forcing-trailing-slashes.pages.dev/index.html redirects to https://forcing-trailing-slashes.pages.dev/

And finally, for a non-existent file:

• https://forcing-trailing-slashes.pages.dev/non-existent does 404 behavior (404 /404.html if exists else 200 /index.html)

_worker.js

export default {
  async fetch(request, env) {
    let { pathname, origin, search } = new URL(request.url);

    if (pathname.endsWith("/")) {
      // Serve /foo.html at /foo/
      // Serve /bar/index.html at /bar/
      return env.ASSETS.fetch(request, { redirect: "follow" });
    } else {
      const assetPathname = pathname.replace(/\/(index(.html)?)?$/, "");
      const assetURL = new URL(`${assetPathname}${search}`, origin);
      let assetRequest = new Request(assetURL, request);
      assetRequest = new Request(assetRequest, {
        headers: {
          ...Object.fromEntries(request.headers.entries()),
          "cf-worker": "deprecated-pages=disable-spa-mode",
        },
      });

      const assetResponse = await env.ASSETS.fetch(assetRequest, {
        redirect: "follow",
      });

      if (
        assetResponse.status === 200 &&
        assetResponse.headers.get("content-type").includes("text/html")
      ) {
        // If an HTML asset can eventually be served at the URL with a trailing slash, redirect to the URL with a trailing slash.
        return new Response(null, {
          status: 302,
          headers: {
            Location: `${assetPathname}/${search}`,
          },
        });
      } else {
        // Serve /bin at /bin as normal
        // Serve /non-existent with normal 404 behavior (404 /404.html if available or 200 /index.html if not)
        return env.ASSETS.fetch(request);
      }
    }
  },
};