Inspecting Response Headers | CodeSignal Learn

Inspecting Response Headers | CodeSignal Learn

Introduction

Hello and welcome to this new lesson! Today, we will build upon your existing knowledge of Node.js and the axios library and learn more about the responses we get when making HTTP requests. Specifically, we'll be inspecting response headers .

Introduction to HTTP Response Headers

Whenever you make an HTTP request, the server not only sends back the requested content, but also some metadata related to that content. This metadata is conveyed through HTTP headers, which come as key-value pairs. In simpler terms, if HTTP were a mailing system, headers would be similar to the information you find on the outside of the mail envelope — who it's from, where it's going, the date it was sent, and so on. HTTP headers consist of information like what type of content is being sent, how to decode it, when it was last modified, and more!

Accessing Response Headers in Node.js using axios

Understanding Key HTTP Response Headers

When you run the previous code, you'll probably come across many headers . Here are a few important ones that come up frequently: server : The software used by the originating server. date : The date and time when the message was sent. content-type : The MIME type of the returned content. This could be text/html, application/json, image/jpeg, and so on. This tells the client what the content is and how to open it. content-length : The size, in bytes, of the returned content. connection : Options desired by the client for the connection. These headers provide additional insights into the server and the response content, and they can be quite useful in some cases!

Applying Response Headers in Web Scraping

Now, why is all this important for web scraping ? Let's dig a bit deeper. As a web scraper, your main goal is to extract useful data from web pages. However, scraping is not just about making requests and parsing HTML. You also need to ensure that your scraper behaves well and follows the rules set by the server. The server's responses, including headers, are a critical source of feedback for your scraper, containing valuable information about what the server allows or expects you to do. For instance, an important header in web scraping is content-type, which can help you determine the format of the returned content. If the content-type is application/json, you can access response.data directly as a JavaScript object since axios automatically parses JSON responses. Knowing this can greatly shape how your web scraping code is structured.

Summary

Well, our journey for this lesson stops here. We learned about HTTP response headers and how to inspect them using Node.js and the axios library. Keep practicing and experimenting with different websites to further strengthen your understanding of this important aspect of HTTP! Happy coding!

Previous Lesson Next Lesson: Using Query Parameters

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Let's use Node.js and the axios library to see some of these headers in action, using the solution code as an example.

const axios = require('axios');

const url = 'http://quotes.toscrape.com';  // We'll scrape quotes from this webpage

async function fetchHeaders() {
    try {
        const response = await axios.get(url);
        
        if (response.status === 200) {
            console.log("Response headers:");
            for (const [header, value] of Object.entries(response.headers)) {
                console.log(`${header}: ${value}`);
            }
        }
    } catch (error) {
        console.error('Error fetching data:', error.message);
    }
}

fetchHeaders();

First, we make an HTTP GET request to our target URL using axios, which gives us a response object. One of the properties of this object is headers, which is a plain JavaScript object containing all response headers.

We can print these headers by iterating through the object using Object.entries() to get key-value pairs. Let's run this and see what we get!

The output of the above code will be:

Response headers:
date: Tue, 07 May 2024 18:28:19 GMT
content-type: text/html; charset=utf-8
content-length: 11054
connection: keep-alive

This output summarizes key information from the response headers, including when the response was sent (date), what the content type is (content-type), how big the content is in bytes (content-length), and the connection status (connection). Such details are crucial for understanding how to handle the received data in web scraping or API calls.

JavaScript

const axios = require('axios');

const url = 'http://quotes.toscrape.com';  // We'll scrape quotes from this webpage

async function fetchHeaders() {
    try {
        const response = await axios.get(url);
        
        if (response.status === 200) {
            console.log("Response headers:");
            for (const [header, value] of Object.entries(response.headers)) {
                console.log(`${header}: ${value}`);
            }
        }
    } catch (error) {
        console.error('Error fetching data:', error.message);
    }
}

fetchHeaders();