Pages Headers & Redirects Configuration
In this tutorial, you'll learn about Pages Headers & Redirects Configuration. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.
This tutorial explains how to use _headers and _redirects files in Cloudflare Pages to control HTTP response headers, cache behavior, and URL forwarding rules. Proper header configuration improves security by enforcing HTTPS and preventing clickjacking, while redirects preserve SEO equity when URLs change. The DodaZIP marketing site uses redirects to map legacy blog URLs to new paths and headers to enforce strict transport security.
Headers File Format
Place a _headers file in your build output directory. Each rule starts with a URL pattern followed by colon-indented header lines.
flowchart LR A[_headers file] --> B[Parse URL pattern] B --> C[Match request path] C --> D[Apply headers] D --> E[Response to client] style D fill:#f90,color:#fff style C fill:#f90,color:#fff
Security Headers
Static Sites benefit from security headers that protect visitors from common web vulnerabilities.
# _headers
/*
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
// Verify headers are applied
async function checkHeaders(url) {
const response = await fetch(url);
const headers = {
xfo: response.headers.get('x-frame-options'),
cto: response.headers.get('x-content-type-options'),
rp: response.headers.get('referrer-policy')
};
console.log(JSON.stringify(headers, null, 2));
}
checkHeaders('https://mysite.pages.dev');
// Expected output:
// {
// "xfo": "DENY",
// "cto": "nosniff",
// "rp": "strict-origin-when-cross-origin"
// }
Cache Control Headers
Control how long browsers and CDN nodes cache your assets.
# _headers
/images/*
Cache-Control: public, max-age=31536000, immutable
/assets/*
Cache-Control: public, max-age=86400
/*.html
Cache-Control: public, max-age=3600
Redirects File Format
The _redirects file uses a three-column format: source path, destination URL, and HTTP status code.
# _redirects
/blog/old-post /blog/new-post 301
/news/* https://news.example.com/:splat 302
/contact /about/contact 301
// Parse a redirects file programmatically
const redirects = `
/blog/old /blog/new 301
/news/* /updates/:splat 302
`.trim().split('\n').map(function(line) {
const parts = line.split(/\s+/);
return { source: parts[0], destination: parts[1], status: parseInt(parts[2]) };
});
console.log(redirects);
// Expected output:
// [
// { source: '/blog/old', destination: '/blog/new', status: 301 },
// { source: '/news/*', destination: '/updates/:splat', status: 302 }
// ]
Splat and Placeholder Redirects
Use :splat to capture wildcard segments and :placeholder for named parameter forwarding.
// Test a redirect matching function
function matchRedirect(path, rule) {
const pattern = rule.source.replace(/\*/g, '(.*)');
const regex = new RegExp('^' + pattern + '$');
const match = path.match(regex);
if (!match) return null;
let destination = rule.destination;
if (match[1]) {
destination = destination.replace(':splat', match[1]);
}
return { destination: destination, status: rule.status };
}
const rule = { source: '/blog/*', destination: 'https://blog.example.com/:splat', status: 301 };
console.log(matchRedirect('/blog/hello-world', rule));
// Expected output: { destination: 'https://blog.example.com/hello-world', status: 301 }
FAQ
Practice Questions
- What HTTP status code should you use for a permanent redirect?
- Which header directive prevents your site from being embedded in an iframe?
- How do you capture a wildcard segment from a redirect source pattern?
Summary
The _headers file controls HTTP response headers for security and Caching. The _redirects file handles URL forwarding with support for splat patterns and status codes. Both files live in your build output directory and are processed at the CDN edge before requests reach your origin.
Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro