Guida pratica ai codici di stato HTTP

Il check del funzionamento corretto di un sito, rispetto a browser (ovvero utenti) e motori di ricerca, è importantissimo per la parte SEO tecnica di qualsiasi blog o portale, passa spesso per la verifica dei codici HTTP (HTTP status o stato HTTP): essi sono la risposta che il server fornisce in termini di codice numerico, invisibile agli utenti di norma, ma considerato come parametro indicativo del corretto funzionamento di una pagina web qualsiasi.

Premessa: lo scenario

I codici di Stato sono un argomento molto complesso di HTTP, tanto spesso che il più delle volte ne facciamo uso senza rendercene conto. I vari plugin di WordPress, ad esempio, sono incentrati sull’utilizzo di chiamate HTTP, E quali costituiscono codice di Stato che possono essere a loro volta utilizzati in vari modi. Ci stiamo muovendo quindi in un ambiente che riguarda la comunicazione HTTP, che come un vero e proprio linguaggio di programmazione prevede metodi, protocolli, strutture dei messaggi, porte, status code, ma ti dei dati ed eventuali middleware.

HTTP Methods:

Ecco una traduzione ed estensione dei vari metodi HTTP, con esempi concreti per ognuno:

1. GET: Recupera informazioni dal server.

• Traduzione: Questo metodo viene utilizzato per richiedere dati da una risorsa specificata sul server.
• Esempio concreto: Immagina di voler visualizzare la pagina di un prodotto su un sito di e-commerce. Quando accedi all’URL del prodotto, il browser invia una richiesta GET al server per ottenere le informazioni del prodotto, come il nome, il prezzo e la descrizione.
• Richiesta: GET /prodotti/123
• Risposta: 200 OK con il corpo della risposta che contiene i dettagli del prodotto.

2. POST: Invia dati al server (spesso usato per i moduli).

• Traduzione: Questo metodo viene utilizzato per inviare dati al server, ad esempio per creare una nuova risorsa.
• Esempio concreto: Se compili un modulo di registrazione su un sito web e premi “Invia”, il browser invia una richiesta POST con i dati del modulo (nome, email, password) al server per creare un nuovo account utente.
• Richiesta: POST /registrazione con il corpo della richiesta che contiene i dati dell’utente.
• Risposta: 201 Created indicando che il nuovo utente è stato creato con successo.

3. PUT: Aggiorna una risorsa esistente sul server.

• Traduzione: Questo metodo viene utilizzato per aggiornare completamente una risorsa esistente.
• Esempio concreto: Supponiamo che tu voglia aggiornare le informazioni del tuo profilo utente su un sito web. Puoi inviare una richiesta PUT per aggiornare i dettagli del tuo profilo (nome, email, etc.).
• Richiesta: PUT /utenti/456 con il corpo della richiesta che contiene le nuove informazioni del profilo.
• Risposta: 200 OK o 204 No Content se l’aggiornamento è avvenuto con successo.

4. DELETE: Elimina una risorsa dal server.

• Traduzione: Questo metodo viene utilizzato per richiedere la cancellazione di una risorsa specificata.
• Esempio concreto: Se decidi di eliminare un post dal tuo blog, il browser invia una richiesta DELETE per rimuovere quel post dal server.
• Richiesta: DELETE /post/789
• Risposta: 200 OK o 204 No Content se la risorsa è stata eliminata con successo.

5. ALL: Utilizzato per testare, consente tutti i metodi HTTP (non comunemente usato in produzione).

• Traduzione: Questo metodo non è standard e viene utilizzato principalmente per scopi di test per consentire tutti i metodi HTTP su una risorsa.
• Esempio concreto: In un ambiente di test, potresti configurare un endpoint che risponde a tutte le richieste HTTP (GET, POST, PUT, DELETE) per verificare come il server gestisce diversi metodi.
• Richiesta: ALL /test
• Risposta: Dipende dal metodo HTTP effettivo utilizzato nella richiesta.

6. Altri Metodi HTTP (meno comuni):

• USE: Non è uno dei metodi HTTP standard e non è comunemente utilizzato.
• LISTEN: Questo metodo non è standard nel contesto HTTP; tuttavia, alcuni protocolli o sistemi personalizzati potrebbero usare nomi simili per scopi specifici.

Metodi meno comuni:

• HEAD: Simile a GET, ma non restituisce il corpo della risposta. Viene utilizzato per ottenere gli header della risposta.
  • Esempio: HEAD /file.txt potrebbe restituire solo gli header che descrivono il file senza fornire il contenuto.
• OPTIONS: Richiede le opzioni di comunicazione supportate da una risorsa.
  • Esempio: OPTIONS /api può restituire i metodi HTTP supportati da /api.

Questi metodi sono usati per varie operazioni su risorse web e possono essere combinati in modi diversi per gestire le interazioni tra client e server in applicazioni web.

Request and Response Structure:

Request (Richiesta)

Una richiesta HTTP è composta da vari elementi che indicano al server cosa fare e forniscono eventuali dati aggiuntivi necessari. Ecco una panoramica delle componenti principali:

1. URL (Uniform Resource Locator):
   • Traduzione: È l’indirizzo completo della risorsa a cui si sta cercando di accedere o manipolare.
   • Esempio concreto: https://www.example.com/prodotti/123
     • Qui, https://www.example.com è il dominio del server, e /prodotti/123 è il percorso che indica una risorsa specifica (ad esempio, un prodotto con ID 123).
2. Method (Metodo):
   • Traduzione: Indica l’azione che il client vuole eseguire sulla risorsa (es. GET, POST, PUT, DELETE).
   • Esempio concreto: POST
     • Utilizzato quando si inviano dati al server, come nel caso di un modulo di registrazione.
3. Headers (Intestazioni):
   • Traduzione: Forniscono informazioni aggiuntive sulla richiesta. Possono includere dettagli come il tipo di contenuto, le credenziali di autenticazione, e altre informazioni necessarie per la gestione della richiesta.
   • Esempio concreto:
     • Authorization: Bearer <token> — usato per fornire un token di autenticazione per accedere a risorse protette.
     • Content-Type: application/json — indica che il corpo della richiesta è in formato JSON.
4. Body (Corpo) [Opzionale]:
   • Traduzione: Contiene i dati da inviare al server (solo per metodi come POST e PUT). Non è presente nelle richieste GET.
   • Esempio concreto: Quando si invia un modulo di registrazione, il corpo della richiesta potrebbe essere:
     json

Porte standard / default:

• HTTP: lavora in genere sulla porta 80 (default)
• HTTPS (secure HTTP): lavora sulla 443 (default)
• SSH (secure shell): lavora in genere sulla 22

Formati dei dati

• JSON (application/json): è il formato più comune per lo scambio dei dati
• MIME Types: prevede ulteriori possibilità di formati di scambi descritte su https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

Uso di asset statici

Definizione: “Servire risorse statiche” significa rendere disponibili file come immagini, fogli di stile (CSS), script JavaScript e altri file statici a un client (tipicamente un browser web). Questi file non cambiano dinamicamente; sono serviti così come sono, senza alterazioni.

Contesto e Utilizzo: Nel contesto delle applicazioni web, è comune avere risorse statiche che devono essere accessibili ai client per rendere l’interfaccia utente completa e interattiva. Ad esempio:

• Immagini: Loghi, icone, foto.
• CSS: Fogli di stile per la formattazione e il layout delle pagine web.
• JavaScript: Script per aggiungere interattività e funzionalità alla pagina web.

Implementazione con Express.js:

Express.js è un framework per Node.js che semplifica la creazione di server web. Per servire file statici, Express.js utilizza il middleware express.static. Questo middleware gestisce automaticamente le richieste per file statici e li restituisce al client.

Passaggi per Servire Risorse Statiche con Express.js

1. Installazione di Express.js: Prima di tutto, devi avere Express.js installato nel tuo progetto Node.js. Puoi installarlo usando npm (Node Package Manager):
2. npm install express

Creazione della Struttura delle Cartelle: Tipicamente, le risorse statiche sono collocate in una cartella specifica del progetto, comunemente chiamata public o static.

• Esempio di struttura delle cartelle:
• my-app/
  ├── public/
  │ ├── images/
  │ │ └── logo.png
  │ ├── css/
  │ │ └── style.css
  │ └── js/
  │ └── script.js
  ├── server.js
  └── package.json

Configurazione di Express per Servire File Statici: Nella tua applicazione Express, utilizza express.static per servire i file dalla cartella public. Ecco come configurarlo:

// server.js
const express = require(‘express’);
const path = require(‘path’);

const app = express();
const port = 3000;

// Usa il middleware per servire file statici dalla cartella ‘public’
app.use(express.static(path.join(__dirname, ‘public’)));

// Definisci una route di base (opzionale)
app.get(‘/’, (req, res) => {
res.send(‘Benvenuto nella mia app!’);
});

// Avvia il server
app.listen(port, () => {
console.log(`Server ascolta sulla porta ${port}`);
});

1. Accesso ai File Statici: Una volta configurato, puoi accedere ai file statici utilizzando il percorso relativo alla cartella public nella tua richiesta URL. Ad esempio:
   • Immagine: http://localhost:3000/images/logo.png
   • CSS: http://localhost:3000/css/style.css
   • JavaScript: http://localhost:3000/js/script.js

Esempio pratico di Utilizzo

Supponiamo che tu abbia una pagina HTML che necessita di un foglio di stile e uno script JavaScript. Ecco un esempio di come includerli nella tua pagina HTML:

1. Accesso ai File Statici: Una volta configurato, puoi accedere ai file statici utilizzando il percorso relativo alla cartella public nella tua richiesta URL. Ad esempio:
   • Immagine: http://localhost:3000/images/logo.png
   • CSS: http://localhost:3000/css/style.css
   • JavaScript: http://localhost:3000/js/script.js

Esempio di Utilizzo

Supponiamo che tu abbia una pagina HTML che necessita di un foglio di stile e uno script JavaScript. Ecco un esempio di come includerli nella tua pagina HTML:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina di Esempio</title>
<!-- Include il foglio di stile CSS -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Ciao, Benvenuto!</h1>
<img src="/images/logo.png" alt="Logo">
<!-- Include lo script JavaScript -->
<script src="/js/script.js"></script>
</body>
</html>

API vs. SSR e Middleware

API vs. SSR (Rendering lato server):

• API: Gestisce lo scambio di dati utilizzando il formato JSON.
• SSR: Genera i template HTML sul server e li invia al client.

Invio Dati vs. Invio Template:

• res.json(): Invia dati JSON nelle risposte delle API.
• res.render(): Renderizza e invia template HTML nelle risposte SSR.

Middleware:

• Funzioni che intercettano richieste e risposte per elaborazioni aggiuntive.
• Accesso agli oggetti di richiesta e risposta.
• Può essere personalizzato, fornito da Express.js, o di terze parti.

Middleware URL Encoded:

• Parsifica i dati dei moduli inviati tramite richieste POST con caratteri codificati (e.g., express.urlencoded).

(fonte)

Cosa sono le request HTTP(S)

Ogni chiamata HTTP(S) viene detta tecnicamente request, ovvero richiesta.

Un esempio banale di alto livello è l’apertura di questa pagina su un browser; avete chiesto al DNS una risorsa su trovalost.it, ed il server ha risposto inviando una request al vostro browser. Un esempio di basso livello è quello che permette ad un programmatore di richiamare una API all’occorrenza.

Le request sono caratterizzate da un metodo di trasmissione o method, che in genere può essere di vari tipi:

• GET: invio una richiesta con parametri nell’URL, in chiaro (sconsigliata per username e password, ad esempio)
• POST: invio una richiesta con parametri incorporati nel body, questa volta
• PUT: invio una richiesta di inserimento sul server
• DELETE: invio una richiesta di cancellazione sul server (possibilmente autenticata)

Cosa sono i codici HTTP?

I codici HTTP sono numeri di tre cifre che vengono inviati in modo trasparente dai server web, e che servono ad identificare il tipo di risposta fornita. Bisogna partire dal fatto che quando proviamo ad aprire un sito ci verrà  restituito in modo più o meno evidente un codice di risposta, che è un numero di tre cifre secondo uno standard mondiale.

Se la risposta è corretta ed il caricamento può avvenire, ad esempio, viene fornito un codice 200 OK, altrimenti ci sono status diversi in base alle diverse diagnostiche.

Se la pagina è mancante o non è reperibile, ad esempio se è stata cancellata dal webmaster, viene restituito un 404.

Se poi c’è un errore a livello di codice PHP o un errore di sintassi nel file HTACCESS, il codice potrebbe essere il 500.

I codici sono codificati in modo universale secondo le specifiche RFC valide a livello mondiale, anche se alcuni servizi potrebbero usarli in modo differente o utilizzarne alcuni proprietari.

Come si usano gli status HTTP?

A livello pratico, gli status HTTP sono utili quando si programma un sito o un web service per poter effettuare diagnosi di alto livello sul corretto funzionamento del sito.

Cosa sono le redirect chains (catene di redirect)

In molti casi vengono sfruttati per verificare le cosiddette “catene di redirect” (redirect chains), che devono essere più brevi possibili e che servono a minimizzare i tempi di caricamento del sito, in certi casi. Per misurare le catene di redirect si possono sfruttare servizi online come ad esempio HTTPStatus.

Dove trovare gli status HTTP?

La verifica dello status di un URL può avvenire anche senza browser; si può infatti verificare lo status HTTP con un terminale del proprio computer sfruttando il comando curl:

curl -v https://nomesito.it

oppure si può usare il tool gratuito HTTPStatus.io. Basta inserire gli URL delle pagine, dello stesso sito o di siti web diversi, e si andrà  a vedere come si comporta il sito e dove risolva la pagina.

Vediamo quindi gli status più diffusi e come interpretarli, premesso che la prima cifra di solito rappresenta il codice identificativo della classe di risposta, ovvero:

• 1xx Informational response: sono codici relativi a come la richiesta del server venga interpretata, ad esempio quando inviamo dati con un form via browser. Hanno uso interno, in genere e solitamente sono poco utilizzati.
• 2xx Success: il più importante è il 200, a volte chiamato 200 OK, che indica che la chiamata ha avuto un inizio e si è conclusa in modo consistente.
  
• 3xx Redirection: indica vari casi di redirezione di un URL, ovvero di passaggio da una URL ad un altro (ad esempio da www.sito.it a sito.it, oppure da /pagina_vecchia a /pagina_nuova).
• 4xx Errori client: indica un errore a livello di client, quindi browser o crawler di Google, ad esempio.
• 5xx Errori server: indica un errore a livello di server, quindi ad esempio Apache o NGINX.

HTTP status 200: cosa vuol dire?

Risposta standard che indica chiamate HTTP completate correttamente; le risposte possono essere di tipo GET oppure POST, la prima con parametri passati via URL e la seconda con parametri passati internamente.

In breve: tutto OK, la chiamata HTTP(S) funziona. Non ci sono bug gravi nel sito, anche se potrebbero esserci warning o errori di altro tipo.

Significato redirect 301 / status 301

Risposta standard per i redirect 301, che indicano chiamate HTTP che passano o switchano in modo trasparente, ed in questo caso in modo definitivo, su un’altra risorsa in modo definitivo; in genere sono ben interpretate da motori di ricerca, social network ed utenti via browser, anche se aggiungono un livello tra le chiamate HTTP (quindi valgono come chiamata HTTP ulteriore), ed in genere è opportuno non abusarne ed usarli lo stretto necessari.

In breve: tutto OK, la chiamata HTTP(S) redireziona definitivamente su un’altra pagina o dominio.

I redirect di questo tipo devono essere mantenuti sul server per un po’ di tempo, ad esempio qualche mese, perchè Google li riveli e li convalidi definitivamente.

Significato redirect 302

Risposta standard per i redirect temporanei, che indica chiamate HTTP che passano su un’altra risorsa in modo non definitivo; prima i server usavano solo i 302, ora tendono ad usare i codici più moderni 303 e 307, dal significato sostanzialmente identico.

In breve: tutto OK ciccio, solo che la chiamata HTTP(S) redireziona temporaneamente su un’altra pagina o dominio.

Significato redirect 303

Risposta standard per i redirect temporanei, che indica chiamate HTTP che passano su un’altra risorsa in modo non definitivo; prima i server usavano solo i 302, ora tendono ad usare 303, dal significato quasi identico.

In breve: tutto OK ciccio, la chiamata HTTP(S) redireziona temporaneamente su un’altra pagina o dominio.

Significato redirect 307

Il 307 è un tipo di 302 con migliore supporto da parte dei browser moderni: da un punto di vista comportamentale è quasi identico ad un 302, se non per un piccolo dettaglio: ovvero che il body della request non dovrà  essere cambiato. Con il 302 esisteva infatti un fallback, un comportamento di default che imponeva al client di passare al metodo GET, con possibilità  di errori imprevedibili. Se si usa il 307 con una POST, questi errori sono al sicuro e non avverranno.

Le richieste in GET vengono comunque trattate allo stesso modo.

In breve: tutto OK ciccio, la chiamata HTTP(S) redireziona temporaneamente su un’altra pagina o dominio.

HTTP status 404

Risposta standard per le pagine mancanti: ad esempio un articolo di giornale online cancellato, oppure un servizio rinominato o rimosso.

In breve: ehi, abbiamo un problemino – la pagina che hai richiesto non c’è.

HTTP status 500

Risposta standard per le pagine con errori lato server, tipicamente sul codice, sul DB o sulla configurazione del server.

In breve: ehi, abbiamo un problemino – la pagina che hai richiesto non funziona.

Come si usano nella pratica i codici HTTP?

Se il tuo sito funziona bene in questi termini, è fatto a regola d’arte: i codici HTTP ti serviranno a fare diagnostiche avanzate su qualsiasi sito per capire che problemi ci possano essere negli stessi, questo è il senso. Per usare operativamente gli HTTP status, il più delle volte, potete seguire il tutorial di configurazione di un dominio, in modo da verificare che un sito redirezioni in modo corretto.

Photo Credits: SEObility.net

👇 Da non perdere 👇

• Cellulari 📱
• Internet 💻
• Lavoro 🔧
• monitoraggio servizi online 📈
• Scrivere 🖋
• Sicurezza & Privacy 👁
• Spiegoni artificiali 🎓
• 💬 Il nostro canale Telegram: iscriviti
• 🔴 Errori di battitura: scambi, inversioni e tutti gli altri
• 🟢 Test di Informatica On Line
• 🟠 Domini .name: come e dove registrarne uno

---

---

Questo portale esiste da 4608 giorni (13 anni), e contiene ad oggi 4343 articoli (circa 3.474.400 parole in tutto) e 22 servizi online gratuiti. – Leggi un altro articolo a caso