Setting custom HTTP headers on a Cloudflare Pages site

I have a React app (built with create-react-app) which I’m hosting on Cloudflare pages. I wanted to add a X-Robots-Tag HTTP header to every page on the site. It turns out to be really quite easy:

Create a new file called _headers in your public folder, and put this inside:

  X-Robots-Tag: noindex, nofollow  

Obviously this is a really simple use-case, but there’s a lot more you can do. Headers take the following format:

  [name]: [value]

You can have multiple name/value pairs under a given URL. URLs can contain placeholders and wildcards (called “splats”) to help widen or narrow down where they apply. So to stop anything in the /app folder from being shown in an iframe you might do:

  X-Frame-Options: DENY

You can set multiple headers for the same URL, e.g.

  X-Frame-Options: SAMEORIGIN
  Referrer-Policy: same-origin
  X-Content-Type-Options: nosniff

Lets say your production site is on a custom domain, and the dev/test versions live on Cloudflare’s domain. You don’t want search engines to index your dev/test versions, so you can send the X-Robots-Tag header only on those domains, using the placeholder functionality:

# Swap projectname below for your own project's name*
  X-Robots-Tag: noindex, nofollow  

There’s more examples over in their documentation.