HTTP Headers Cheat Sheet

Complete Guide to HTTP Headers

Every time you click a link or fetch data, your browser and the server pass secret notes back and forth. We call these HTTP headers. They don't show up on the screen, but they quietly control almost everything about your website.

Headers manage caching, tell the browser how to format data, verify your login tokens, and set up strict security boundaries. You just need to know which ones to send.

How to View HTTP Headers in Your Browser

Before you start coding, it really helps to see what headers your browser is already sending. You don't need any special software to do this.

1. Right-click anywhere on a webpage and select Inspect.
2. Click on the Network tab at the top of the panel.
3. Refresh the page. You will see a list of files loading.
4. Click on the very first file in the list (usually the website name).
5. Look at the Headers panel on the right. You will see the exact Request and Response headers for that page.

Request vs. Response Headers

Headers generally flow in two directions. So, depending on what you are trying to do, you need to understand who is sending the note:

• Request Headers (REQ): Sent by the client (your browser, or an API tool like Postman) to the server. They provide context, like "I am a Chrome browser" or "Here is my login token."
• Response Headers (RES): Sent by the server back to the client. They contain instructions, like "Save this file in cache for 24 hours" or "Do not load scripts from other domains."
• Entity/Representation Headers (BOTH): These can be sent by either side to describe the actual data payload, such as defining the Content-Length or Content-Type.

Do HTTP Headers Affect SEO?

Absolutely. While status codes tell Google if a page exists, your headers tell Google how fast and secure the page is.

• Speed: A proper Cache-Control header improves your Core Web Vitals, which is a direct ranking factor.
• Security: Using Strict-Transport-Security (HSTS) ensures search engines know your site relies on HTTPS, keeping your security score high.
• Mobile Indexing: The Vary header helps Googlebot understand if you serve different content to mobile vs. desktop users.

How to Set HTTP Headers in Code

Setting response headers is one of the most common tasks in backend web development. Here is how you can inject custom headers before sending data back to the user:

// Must be called before any HTML output
header("Content-Type: application/json");
header("Cache-Control: public, max-age=3600");
echo json_encode(['status' => 'success']);

app.get('/api', (req, res) => {
  res.set({
    'Content-Type': 'application/json',
    'Cache-Control': 'public, max-age=3600'
  });
  res.send({ status: 'success' });
});

@app.route('/api')
def api():
    response = make_response(jsonify(status='success'))
    response.headers['Content-Type'] = 'application/json'
    response.headers['Cache-Control'] = 'public, max-age=3600'
    return response

Common Questions & Troubleshooting

1. What is the CORS Access-Control-Allow-Origin header?
It is a security mechanism. Browsers block front-end code from requesting data from a different domain by default. If you want a website at example.com to fetch data from your API at api.com, your API must reply with an Access-Control-Allow-Origin: https://example.com header to authorize it.

2. How do I force the browser to clear cache using headers?
If you updated a file but users are still seeing the old version, set your Cache-Control header to no-store, no-cache, must-revalidate. This tells the browser to skip the local cache and request a fresh copy right away.

3. Can I create my own custom HTTP headers?
Yes! You can send any custom data you want. Years ago, developers used an X- prefix for custom headers (like X-My-App-Version). But that standard is officially retired. Today, you should just name it whatever makes sense, like My-App-Version: 2.0.

4. Is there a size limit for HTTP headers?
There is no official size limit in the HTTP specification. But in the real world, most web servers (like Nginx and Apache) will block requests if the total header size goes over 8KB. If you try to stuff too much data into a Cookie header, you will get a 431 Request Header Fields Too Large error.

5. What is the difference between Authorization and Proxy-Authorization?
The Authorization header proves your identity to the main web server you are trying to reach. The Proxy-Authorization header is specifically used to prove your identity to an intermediate proxy server (like a corporate firewall) that sits between you and the web.

6. Why do I need a Content-Security-Policy (CSP) header?
A CSP header is your best defense against Cross-Site Scripting (XSS). Even if a hacker manages to inject bad JavaScript into your website's database, a strict CSP header will tell the browser, "Only execute scripts that originate from my own domain." The malicious script will be blocked automatically.