If you do not know what HTTP Headers are, let me run a quick introduction, and if you do, then it would be just a refreshment.

What is HTTP anyways?

HTTP stands for Hyper Text Transfer Protocol, which is the protocol that we use on our browsers and to visit web pages and similar services. Since HTTP is part of the TCP, stack than it means that the flow works just like PING PONG. Below a simple graphic to explain it:

More about HTTP

HTTP is a protocol and it has several methods. The most used methods are:

GET

The HTTP GET method is used to request a specific URL or file, some examples below:

HTTP GET https://domain.com/file.txt 

HTTP GET domain.com/contact-form/

HTTP GET https://www.domain.com/secure-file.html

This is basically what happens when you put a domain on the browser bar and click enter, or when you click on a link within a website. Your browser then generates an HTTP GET request to the server asking for that URL.

Its basically a request from the visitor to a server asking the server to send information.

POST

The HTTP POST method is used on the opposite way. The POST is used when the visitor sends information to the server to process. Some examples can be:

• Filling out a contact form and clicking SEND. The POST method that the visitor sends, it will contain all the information of the contact form, and the server will receive the info and process it accordingly.
• Filling out any form.
• Adding products to shopping cart.
• Doing a checkout process on any e-commerce website.

HTTP POST www.domain.com/contact-form/?filled=yes&name=John%20Doe&email=test@test.com&phone=1234567&comments=no

We do not usually see the POST contents on the browsers unless you use your browser’s Developer Tools to check on what is happening on the background.

Now that we’ve covered the basics, let’s talk about HTTP HEADERS!

What are the HTTP HEADERS?

HTTP Headers is all the extra values that are added to the HTTP GET & POST requests. Below a quick example:

First we do the request

HTTP GET salrocks.com

Then the server answered this:

HTTP/1.1 301 Moved Permanently
Server: nginx
Date: Sat, 27 Jan 2018 01:08:18 GMT
Content-Type: text/html
Content-Length: 178
Connection: keep-alive
Location: https://salrocks.com/

What does that mean?

Let’s break it down shall we?

HTTP/1.1 301 Moved Permanently

The HTTP 301, is a what is called a permanent redirect. This will tell your browser to load a different page, it will get the value from the LOCATION header.

Server: nginx

The SERVER header, it will tell you what software is the web server using to serve websites. On this case the web server used is NGINX. Other values could be Apache, LiteSpeed, ISS, etc.

Date: Sat, 27 Jan 2018 01:08:18 GMT

The DATE header provides a timestamp of the time the request was served.

Content-Type: text/html

The CONTENT header will tell you what type of media file is, if its a text, media file or binary file. It will depend on the MIME TYPES setup on the server.

Content-Length: 178

This one, the CONTENT-LENGTH header will simply tell you the size of the file requested.

Location: https://salrocks.com/

As discussed on the HTTP 301 header, the Location will tell the server what URL it should load instead of the https://salrocks.com that was requested initially.

Ok so that’s simple right? Let’s move on. Let’s now try to load the https://salrocks.com to see what happens. Let’s go!

HTTP GET https://salrocks.com

And now the server answer was this:

HTTP/2 200
server: nginx
date: Sat, 27 Jan 2018 00:18:39 GMT
content-type: text/html; charset=UTF-8
strict-transport-security: max-age=86400
vary: Accept-Encoding
vary: Cookie
link: <https://wp.me/5zKS6>; rel=shortlink

Let’s break the answer now, since there are new values and new headers there. We are just getting started.

content-type: text/html; charset=UTF-8

As you can see the CONTENT-TYPE header now included a charset setting besides the MIME TYPE.

strict-transport-security: max-age=86400

The STRICT-TRANSPORT-SECURITY header is related to HSTS and the policy that tells your browser how long to cache the request.

vary: Accept-Encoding
vary: Cookie

The VARY header tells the other proxies if they should cache a similar request or if they should request a new one..

link: <https://wp.me/5zKS6>; rel=shortlink

The LINK header provides a relationship of the present request to the link provided on this header and the relationship. On this case it tells you that https://wp.me/5zKS6 is a SHORTLINK to https://salrocks.com 

How do you use HTTP HEADERS to troubleshoot issues?

Checking the HTTP Headers of your website it can help you solve all of the following issues:

• Too Many Redirects.
• Failure in forms. The POST event might have gotten a HTTP 404, 403 or 500 error.
• SEO issues with 302 or 301 redirects.
• Caching issues (if an URL is cached, missed or expired).
• Media expiration status.
• CDN cluster from which the asset is served.

Soon I will be writing about HTTP HEADERS for Sucuri, CloudFlare and Kinsta.

Stay tuned!