Wie man Http-Header mit Axios verwendet, um eine Erkennung zu vermeiden

Mihnea-Octavian Manolache am 27. Januar 2023

HTTP-Header sind ein wichtiger Aspekt jeder HTTP-Anfrage oder -Antwort, da sie es dem Client und dem Server ermöglichen, zusätzliche Informationen über die Anfrage auszutauschen. Beim Aufbau einer Node.js-Webanwendung ist es wichtig, einen zuverlässigen und einfach zu bedienenden HTTP-Client für Anfragen an APIs und andere Server zu haben.

JavaScript und insbesondere Node JS bieten eine ganze Reihe von Optionen, wenn es um HTTP-Clients geht. Einer meiner persönlichen Favoriten (und sicherlich einer der Top 5 JavaScript-HTTP-Clients) ist jedoch Axios. Deshalb werden wir uns heute auf die Einstellung der HTTP-Header von Axios konzentrieren.

Axios ist eine weit verbreitete JavaScript-Bibliothek, die den Prozess der Erstellung von HTTP-Anfragen vereinfacht und besonders bei der Arbeit mit APIs in einer Node.js-Umgebung nützlich ist. In diesem Artikel werden wir die verschiedenen Möglichkeiten untersuchen, wie Axios für die Arbeit mit HTTP-Headern verwendet werden kann. Am Ende dieses Artikels sollten Sie in der Lage sein, zu verstehen:

Was ist ein HTTP-Header und wie funktioniert er?
Warum ist Axios ein großartiger HTTP-Client für Javascript
Wie man HTTP-Header Axios in einer echten Webanwendung verwendet

Wie die HTTP-Kommunikation funktioniert

Bevor wir uns mit der Definition eines HTTP-Headers beschäftigen, ist es wichtig, zumindest einen Überblick über die Funktionsweise des HTTP-Protokolls zu haben. Wie Sie sicher bereits wissen, ist das Hypertext Transfer Protocol (HTTP) die Grundlage, auf der das Web heute aufgebaut ist. Auf einer hohen Ebene ermöglicht es die Übertragung von Informationen zwischen einem Server und seinen Clients. Der tatsächliche Ablauf dieses Informationsaustauschs sieht in etwa so aus:

Der Client öffnet eine neue TCP-Verbindung
Er sendet eine Nachricht an den Server, die als HTTP-Anfrage bezeichnet wird
Der Server empfängt und interpretiert die Anfrage
Anschließend sendet er eine Nachricht an den Client zurück, die als HTTP-Antwort bezeichnet wird
Der Client liest die Nachricht und setzt die Verbindung fort oder schließt sie

Der wichtige Teil, auf den wir uns heute konzentrieren werden, ist die Nachricht, insbesondere die vom Client gesendete Nachricht. Damit die Kommunikation zwischen Server und Client effizient ist, müssen die Nachrichten so formatiert werden, wie es das HTTP-Protokoll beschreibt. Bei der HTTP-Anfrage sind die Elemente, aus denen sich die Nachricht zusammensetzt, folgende:

Die Methode beschreibt, was wir mit unserer Anfrage tun wollen (ob wir Informationen empfangen, senden oder aktualisieren wollen usw.)

Der Pfad, die URL, die wir zu erreichen versuchen
Die von uns verwendete Version des HTTP-Protokolls
Die HTTP-Header, die verwendet werden, um zusätzliche Informationen und Metadaten zusammen mit unserer Anfrage zu senden
Der Body, falls wir eine Methode verwenden, die Informationen an den Server sendet (z. B. eine POST-Anfrage)

Was sind HTTP-Header Axios und wie funktionieren sie?

Einfach ausgedrückt, sind HTTP-Header Felder, die zusätzliche Informationen und Metadaten an die Nachricht weitergeben. Auch hier verstehen wir unter Nachricht die Anfrage, wenn sie vom Client gesendet wird, und die Antwort, wenn sie vom Server gesendet wird. Sowohl der Server als auch der Client können also Header weitergeben und empfangen. Nehmen wir zum Beispiel an, Sie möchten eine dauerhafte Verbindung zum Server herstellen. Standardmäßig werden HTTP-Verbindungen nach jeder Anfrage geschlossen. Um dies zu vermeiden, brauchen Sie nur den Header "Keep-Alive" zu übergeben.

Wenn es um HTTP-Header mit Axios geht, gibt es wirklich nichts Besonderes daran. Wie wir bereits besprochen haben, ist Axios ein HTTP-Client und wir haben bereits festgestellt, dass HTTP-Clients Header senden und empfangen können.

Warum Axios ein großartiger HTTP-Client für JavaScript ist

Nachdem wir nun einen Überblick über die Funktionsweise von HTTP haben, lassen Sie uns über "Clients" sprechen. JavaScript bietet einige Optionen für die "programmatische Interaktion" mit einem Server über HTTP. Zu den populärsten gehören `axios`, `node-fetch` und `got`.

In der JavaScript-Gemeinde gibt es unterschiedliche Meinungen darüber, welches Paket zu verwenden ist. Natürlich gibt es viele Vor- und Nachteile für jedes Paket, aber ich selbst habe mich für Axios entschieden, nachdem ich einen einfachen Geschwindigkeitstest zwischen den drei Paketen durchgeführt hatte.

Hier ist das Skript, das ich zum Testen der Geschwindigkeit verwendet habe:

// index.js

import { get_timing, array_sum } from './helpers.js'

import got from 'got'

import axios from 'axios'

const CALLS = 5

const send = async () => {

   const res = {}

  

   let start = process.hrtime()

   await got('https://httpbin.org/')

   const g = get_timing(start)

   res.got = g

   start = process.hrtime()

   await axios.get('https://httpbin.org/')

   const a = get_timing(start)

   res.axios = a

   start = process.hrtime()

   await fetch('https://httpbin.org/')

   const f = get_timing(start)

   res.fetch = f

   return res

}

let test_results = {

   got: [],

   axios: [],

   fetch: []

}

let avg = {}

console.log(`[i] Process started with ${CALLS} iterations.`)

for (let i = 0; i<=CALLS; i++) {

   let r = await send()

   Object.entries(test_results).map(([key, value]) => test_results[key].push(r[key]))

}

Object.entries(test_results).forEach(([key, value]) => {

       console.log(`\n[+] ${key}`)

       console.log(`    [i] Average: ${array_sum(value)/value.length}`)

       console.log(`    [i] Values: ${value}`)

       avg[key] = array_sum(value)/value.length

   }

)

console.log(`\n🚀🚀🚀 WINNER: ${Object.keys(avg).reduce((key, v) => avg[v] < avg[key] ? v : key)}  [${CALLS} calls sent] 🚀🚀🚀`)

Und hier sind die `Hilfsfunktionen`:

// helpers.js

export const get_timing = (start) => {

   const NS_PER_SEC = 1e9

   const NS_TO_MS = 1e6

   const diff = process.hrtime(start)

   return (diff[0] * NS_PER_SEC + diff[1]) / NS_TO_MS

}

export const array_sum = (array) => {

   return array.reduce((accumulator, value) => {

     return accumulator + value

   }, 0)

}

Ich habe mit 5, 10, 20 und 30 Anfragen getestet, die mit jedem Paket gesendet wurden, jeweils 10 Iterationen, und hier ist die Übersicht der Ergebnisse:

Mit Iteration meine ich die Anzahl der Skriptausführungen unter Verwendung dieser Bash-Formel, die eine .txt-Datei mit den Ergebnissen aus jeder Iteration erzeugt:

~ " for i in {1..10}

do

node got.js > "${i}.txt"

echo "${i} done"

done

Wie Sie in der detaillierten Ergebnistabelle sehen werden, gibt es unterschiedliche Zeiten für jede Charge und manchmal ist Axios nicht der Schnellste. Insgesamt erzielte Axios jedoch einen Durchschnitt von 387 Millisekunden und war damit eine halbe Sekunde schneller als seine Konkurrenten. Got und Fetch hatten eine sehr ähnliche Reaktionszeit von durchschnittlich 435 Millisekunden. Wenn also Geschwindigkeit für Ihr Projekt wichtig ist, ist Axios vielleicht der beste HTTP-Client für Sie.

Wie man HTTP-Header mit Axios sendet

Ich persönlich finde, dass Lernen durch Üben zu fast sofortigen Ergebnissen führt. Da wir nun sowohl das Wissen als auch die Werkzeuge haben, um HTTP-Header zu senden, beginnen wir mit der Arbeit an einem kleinen Projekt. In diesem Abschnitt werden wir ein neues Node-Projekt einrichten, Axios installieren und es verwenden, um HTTP-Header an einen Server zu senden.

Das Projekt einrichten

Vergewissern Sie sich, dass Ihre Maschine mit den folgenden Funktionen ausgestattet ist, bevor Sie loslegen:

Node JS - Sie können es von hier herunterladen
Eine IDE - meine alltägliche IDE ist Visual Studio Code

Tipp: Sie können überprüfen, ob Sie Node JS installiert haben, indem Sie den folgenden Befehl in Ihr Terminal eingeben:

~ " node -v 

v19.3.0

Lassen Sie uns nun einen neuen Ordner erstellen und ihn in unserer IDE öffnen. Wenn Sie einen UNIX-ähnlichen Rechner (Mac oder Linux) verwenden, können Sie ein neues Verzeichnis programmatisch über Ihr Terminal erstellen, indem Sie den folgenden Befehl eingeben:

~ " mkdir axios_project && cd axios_project 

~ " npm init -y

~ " npm i axios

~ " touch index.js

~ " code .

Diese Befehle werden:

Erstellen Sie ein neues Verzeichnis (mit dem Namen 'axios_project') und navigieren Sie zu diesem Verzeichnis
Initialisieren Sie ein neues Node JS-Projekt im Verzeichnis
Installieren Sie `axios` in Ihrem Projekt
Erstellen Sie eine neue Datei 'index.js'.
Öffnen Sie Ihre IDE für das aktuelle Projekt

Code zum Lernen

Es gibt tatsächlich einige Möglichkeiten, HTTP-Header mit Axios zu senden. Sie können zum Beispiel ein Config-Objekt verwenden, wie hier beschrieben, oder Sie können die Instanzmethoden verwenden, die die übergebene Konfiguration automatisch mit der Instanzkonfiguration zusammenführen. Sie können auch das Objekt `axios.defaults.headers.common` verwenden, um Standard-Header für alle Axios-Anfragen zu setzen.

Beachten Sie auch, dass Axios ein auf Versprechen basierender HTTP-Client ist. Das bedeutet, dass wir entweder innerhalb einer asynchronen Funktion darauf warten oder die Antwort auflösen müssen.

Mit diesen beiden Aspekten im Hinterkopf, lassen Sie uns mit der eigentlichen Programmierung beginnen. Wir werden innerhalb der Datei "index.js" arbeiten. Der Einfachheit halber fassen wir noch einmal zusammen, was wir vorher tun müssen:

Importieren Sie `axios` in unsere Datei
Definieren Sie ein Config-Objekt, das unsere Header enthalten wird
Übergabe der Konfiguration an `axios`, um eine Anfrage zu stellen
Drucken Sie die Antwort in unserem Terminal aus

#1: Senden einer GET-Anfrage mit dem config-Objekt

import axios from "axios"

const config = {

   method: 'GET',

   url: 'https://httpbin.org/headers',

   headers: {

       'HTTP-Axios-Headers': 'This is my custom header.'

   }

}

axios(config)

   .then((response) => {

       console.log(response)

   })

   .catch((err) => {

       console.log(err)

   })

Das Senden von HTTP-Headern mit Axios ist so einfach wie nur möglich. Um dieses Skript auszuführen, führen Sie einfach den folgenden Befehl in Ihrem Terminal aus:

~ » node index.js  

{

  status: 200,

  statusText: 'OK',

  headers: ...,

  config: ...,

  request: ...,

  data: {

    headers: {

      'Accept': 'application/json, text/plain, */*',

      'Accept-Encoding': 'gzip, compress, deflate, br',

      'Host': 'httpbin.org',

      'Http-Axios-Headers': 'This is my custom header.',

      'User-Agent': 'axios/1.2.2',

      'X-Amzn-Trace-Id': 'Root=1-63b54d94-7656f02113483dfa036c476c'

    }

  }

}

Die gesamte Antwort ist recht umfangreich und folgt diesem Schema. Was uns jedoch am meisten interessiert, sind die `Daten`, die die eigentliche Antwort enthalten, die wir vom Server erhalten haben. Sehen Sie sich nun die Antwort von oben an. Erinnern Sie sich daran, dass wir einen benutzerdefinierten Header `Http-Axios-Headers` an den Server geschickt haben, und wie Sie sehen können, hat der Server diesen auch erhalten.

#2: Senden Sie eine POST-Anfrage mit dem Methodenalias

import axios from "axios"

const data = {

   'foo':'bar'

}

const config = {

   headers: {

       'HTTP-Axios-Headers': 'This is my custom header.'

   }

}

axios.post('http://httpbin.org/post', data, config)

   .then(response => console.log(response.data))

   .catch(err => console.log(err))

Um eine POST-Anfrage zu senden, habe ich unserem Skript ein neues "data"-Objekt hinzugefügt und auch die URL geändert. Wenn Sie nun das Skript ausführen, werden Sie feststellen, dass dies die vom Server empfangenen Daten sind:

{

  args: {},

  data: '{"foo":"bar"}',

  files: {},

  form: {},

  headers: {

    Accept: 'application/json, text/plain, */*',

    'Accept-Encoding': 'gzip, compress, deflate, br',

    'Content-Length': '13',

    'Content-Type': 'application/json',

    Host: 'httpbin.org',

    'Http-Axios-Headers': 'This is my custom header.',

    'User-Agent': 'axios/1.2.2',

    'X-Amzn-Trace-Id': 'Root=1-63b5508a-3a86493f087662d3169e80ee'

  },

  json: { foo: 'bar' },

  origin: '49.12.221.20',

  url: 'http://httpbin.org/post'

}

Wie man HTTP-Header in Axios für Web Scraping verwendet

Wenn Sie Axios für Web Scraping verwenden möchten, beachten Sie bitte, dass die meisten Websites Schutzregeln haben, die Anfragen von automatisierter Software (einschließlich Web Scraper) blockieren.

Die Verwendung von HTTP-Headern, insbesondere des "User-Agent"-Headers, kann eine nützliche Technik sein, um eine Entdeckung beim Web Scraping zu vermeiden. Der User-Agent-Header identifiziert den Client-Browser und das Betriebssystem für den Server, und Webserver können auf der Grundlage dieser Informationen unterschiedliche Inhalte bereitstellen oder Anfragen blockieren. Indem Sie den User-Agent-Header setzen, können Sie einen gewöhnlichen Webbrowser imitieren und so Ihre Chancen erhöhen, einige Erkennungsmechanismen zu umgehen.

Hier ist ein Beispiel dafür, wie man den User-Agent-Header mit Axios verwendet, um eine Erkennung beim Web Scraping zu vermeiden:

import axios from "axios"

axios.defaults.headers.common['User-Agent'] = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'

axios({

   method: 'GET',

   url: 'https://httpbin.org/get',

}).then(response => {

   console.log(response.data)

});

Beachten Sie, dass ich dieses Mal die Option config defaults von Axios verwendet habe, die den Header auf alle kommenden Anfragen anwendet. In diesem Beispiel ist der User-Agent-Header so eingestellt, dass er den Chrome-Browser auf einem Windows 10-Betriebssystem nachahmt. Sie können verschiedene User-Agent-Werte oder verschiedene Header ausprobieren, um zu sehen, was für Ihren speziellen Anwendungsfall am besten funktioniert.

Es ist erwähnenswert, dass das Ändern des User-Agent-Headers zwar in einigen Fällen helfen kann, die Entdeckung zu vermeiden, aber keine narrensichere Methode ist, und dass Webserver immer noch in der Lage sein können, zu erkennen, dass Sie einen Web Scraper verwenden. Daher ist es eine gute Idee, eine Kombination von Techniken zu verwenden, um eine Entdeckung zu vermeiden und die Nutzungsbedingungen der Website einzuhalten.

Schlussfolgerungen

Die Verwendung von HTTP-Headern mit Axios (oder auch mit jedem anderen HTTP-Client) kann die Effizienz der Kommunikation zwischen einem Server und einem Client erhöhen. Darüber hinaus kann es Ihnen sogar helfen, die Entdeckung zu vermeiden, wenn Sie einen Web Scraper erstellen. In der Tat verwenden wir bei WebScrapingAPI verschiedene User Agents als eine der grundlegenden Umgehungstechniken.

Natürlich ist die Erkennung nicht auf Benutzeragenten beschränkt, aber es ist ein guter Ausgangspunkt. Hier finden Sie eine schöne Anleitung, wie Sie vermeiden können, dass Ihre IP-Adresse beim Web-Scraping gesperrt wird, damit Sie besser verstehen, wie Umgehungen funktionieren.

Wussten Sie schon, dass Sie mit der Web Scraping API benutzerdefinierte Kopfzeilen für Ihre Anfrage festlegen können? Wenn nicht, erfahren Sie hier mehr darüber.