CORS in React: Cos’è, Perché è Importante e Come Abilitarlo

04/09/2025, by Ivan

Download JSON Drop API

Comprendere CORS in React

Da tempo CORS è fonte di confusione—e frustrazione—per gli sviluppatori, soprattutto per chi è alle prime armi. Il concetto può risultare difficile da afferrare, in particolare quando si costruiscono Single-Page Application (SPA) con framework come React, Angular o Vue e si cerca di interagire con API di terze parti.

In questa guida ti aiuterò a capire CORS dalle basi. Costruiremo una semplice app React insieme a un server Express per illustrare cosa scatena gli errori CORS e perché accadono. Ancora più importante, ti mostrerò i diversi modi per risolvere questi problemi—sia in generale sia specificamente in un ambiente React.

Che cos’è CORS?

CORS, ovvero Cross-Origin Resource Sharing, è un protocollo che regola come le applicazioni web richiedono risorse a server ospitati su origini diverse. Così come HTTPS definisce regole per la comunicazione sicura, CORS stabilisce le regole per le richieste cross-origin.

Le moderne applicazioni web sono in genere suddivise in due parti fondamentali: il client (il frontend che gira nel tuo browser) e il server (di solito un’API o un servizio backend). Il client invia richieste al server—ad esempio per recuperare dati—e il server restituisce una risposta. CORS entra in gioco quando queste due parti risiedono su domini, porte o protocolli differenti.

CORS localhost — Richiesta verso localhost.

Perché questa architettura è così comune

Questa architettura disaccoppiata—dove frontend e backend sono sviluppati e distribuiti come applicazioni separate—è sempre più popolare. Uno dei principali vantaggi è la flessibilità: il tuo backend può servire molteplici tipi di client, incluse app web, interfacce desktop, app mobile o persino dispositivi IoT. Ogni client può consumare le stesse API senza essere strettamente accoppiato al livello di presentazione.

La Same-Origin Policy e le richieste cross-origin

Poiché client e server sono applicazioni separate, tipicamente sono ospitati su domini, porte o protocolli diversi. Ciò significa che anche quando il tuo frontend tenta di comunicare con il tuo backend, il browser potrebbe trattare la richiesta come cross-origin.

Questo accade ancor più spesso quando si lavora con servizi di terze parti—per autenticazione, analytics, gateway di pagamento e altro. In tutti questi casi, il tuo frontend deve interagire con un’origine diversa inviando richieste HTTP.

Ed ecco il punto: i browser moderni applicano una funzionalità di sicurezza chiamata Same-Origin Policy, che limita il modo in cui gli script in esecuzione su un’origine possono interagire con risorse di un’altra. È qui che interviene CORS—un meccanismo che abilita in sicurezza tali richieste cross-origin.

Impostazioni CORS — Risposta dal Server al Client dalla stessa origine

Perché i browser bloccano le richieste cross-origin

Quando la tua applicazione web prova a richiedere una risorsa da un’origine diversa—come un dominio, una porta o un protocollo differente—il browser applica una funzionalità di sicurezza nota come Same-Origin Policy (SOP). Questa policy è progettata per impedire che siti potenzialmente malevoli accedano senza permesso a dati sensibili su un’altra origine.

Storicamente, ciò ha reso il web molto più sicuro. Per esempio, uno script in esecuzione su xyz.com non poteva recuperare in modo silenzioso dati personali da abcbank.com, proteggendo gli utenti da attacchi cross-site. Tuttavia, la Same-Origin Policy blocca anche casi d’uso legittimi—come quando la tua app React su localhost:3000 tenta di recuperare dati da un’API in esecuzione su localhost:8080 o da un servizio esterno.

Entra in scena CORS: la soluzione alle restrizioni della SOP

È qui che entra in gioco CORS—Cross-Origin Resource Sharing.

CORS è un protocollo che allenta la Same-Origin Policy in condizioni controllate. Permette ai server di indicare—tramite specifiche intestazioni (header) HTTP—che certe richieste cross-origin sono sicure e consentite.

Così, quando la tua applicazione client invia una richiesta a un’origine diversa, il server può rispondere con un set speciale di header CORS. Questi header agiscono come un “permesso” che dice al browser: “Questa richiesta cross-origin è consentita.” Di conseguenza, il browser non blocca più la risposta e la risorsa viene condivisa con successo.

Ottieni risposta con CORS — Richiesta-risposta client-server con CORS abilitato.

Cosa succede quando CORS è abilitato?

Una volta che il tuo browser rileva gli header CORS nella risposta di un server, consente alla tua applicazione di accedere ai dati—anche se l’origine della richiesta è diversa. Questa è l’essenza di CORS: accesso controllato alle risorse tra origini diverse.

Ora che hai una solida comprensione di cosa sia CORS e perché sia necessario, passiamo a un esempio pratico per vederlo in azione. Se vuoi approfondire ulteriormente, puoi sempre consultare questa guida approfondita su CORS per ulteriori dettagli.

🛠️ Passo 1: crea un server Express con endpoint API

Per dimostrare come funziona CORS, ci servono:

Un client (costruito con React) che effettua richieste HTTP
Un server (costruito con Express) che espone endpoint API per rispondere a tali richieste

⚠️ Per innescare un vero scenario CORS, client e server devono essere in esecuzione su origini diverse—ad esempio porte diverse come localhost:3000 e localhost:8080.

🧱 Configura il server

Iniziamo creando un server Express di base.

Crea la cartella del progetto:

mkdir cors-server && cd cors-server

Inizializza un nuovo progetto Node.js:

npm init -y

Questo crea un file package.json con valori predefiniti.

Installa Express:

npm install express

Crea il file di ingresso dell’app:

Crea un file chiamato app.js nella directory principale e aggiungi il seguente codice:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Welcome to CORS server 😁');
});

app.get('/cors', (req, res) => {
  res.send('This has CORS enabled 🎈');
});

app.listen(8080, () => {
  console.log('Listening on port 8080');
});

Questo è un server Express minimale con due endpoint:

/ restituisce un messaggio di benvenuto.
/cors simula un endpoint di risorsa che potresti interrogare dalla tua app React.

Avvia il server:

node app

Una volta avviato, visita http://localhost:8080/ nel browser e dovresti vedere:

Welcome to CORS server 😁

E se visiti http://localhost:8080/cors, dovresti vedere qualcosa di simile:

⚛️ Passo 2: configura l’app React

Ora che il nostro server Express è in esecuzione, è il momento di creare una semplice app React per effettuare richieste HTTP a quel server—e generare intenzionalmente un errore CORS così da imparare come risolverlo.

📦 Crea un nuovo progetto React

In una directory separata dal tuo server, esegui il seguente comando:

npx create-react-app react-cors-guide

Questo inizializzerà una semplice app React in una cartella chiamata react-cors-guide.

Una volta terminato, vai nella directory del progetto e apri il file src/App.js. Sostituiscine il contenuto con il seguente codice:

import { useEffect } from 'react';
import './App.css';

function App() {
  const makeAPICall = async () => {
    try {
      const response = await fetch('http://localhost:8080/', { mode: 'cors' });
      const data = await response.json();
      console.log({ data });
    } catch (error) {
      console.error('CORS error:', error);
    }
  };

  useEffect(() => {
    makeAPICall();
  }, []);

  return (
    <div className="App">
      <h1>React CORS Guide</h1>
    </div>
  );
}

export default App;

🧠 Cosa sta succedendo qui?

Definiamo una funzione makeAPICall che effettua una richiesta GET a http://localhost:8080/ usando la Fetch API.
L’opzione { mode: 'cors' } indica esplicitamente al browser che si tratta di una richiesta cross-origin.
L’hook useEffect assicura che la richiesta venga eseguita non appena il componente <App /> è montato.

🔥 Aspettati un errore CORS

Se avvii l’app React con:

npm start

E controlli la console degli strumenti per sviluppatori del browser, probabilmente vedrai un errore CORS simile a questo:

Access to fetch at 'http://localhost:8080/' from origin 'http://localhost:3000' has been blocked by CORS policy.

Questa è la Same-Origin Policy del browser che fa il suo lavoro: blocca l’accesso a una risorsa proveniente da un’origine diversa.

Comprendere l’errore CORS

L’errore che hai visto nella console del browser è un classico problema CORS. Anche se sia il client sia il server sono in esecuzione su localhost, si trovano su porte diverse—React su localhost:3000 ed Express su localhost:8080.

Questo significa che, secondo la Same-Origin Policy (SOP), sono considerate origini diverse, e il browser blocca la richiesta per ragioni di sicurezza.

⚠️ Messaggio tipico di errore CORS

Ecco cosa probabilmente ti ha comunicato il browser:

Access to fetch at 'http://localhost:8080/' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is 
present on the requested resource. If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Scomponiamolo:

Il browser sta bloccando la risposta perché non ha trovato un header Access-Control-Allow-Origin nella risposta del server.
Suggerisce persino una soluzione temporanea—impostare la modalità di fetch su 'no-cors'—ma ciò restituirebbe una risposta limitata, opaca, con cui non puoi lavorare.
E, punto cruciale: il tuo client non ha fatto nulla di sbagliato. CORS non è un errore lato client—è una regola imposta dal browser in base al modo in cui risponde il server.

✅ CORS dovrebbe essere sempre gestito sul server

Poiché è la risposta del server a determinare se il browser consente l’accesso, la soluzione corretta è configurare il server affinché invii gli header CORS appropriati.

Puoi aggirare CORS lato client usando proxy durante lo sviluppo—ma l’approccio pulito e sicuro per la produzione è abilitare CORS direttamente sul server.

🔧 Abilita CORS sul server Express

Torniamo al file app.js del tuo server Express e aggiorniamo l’endpoint /cors:

app.get('/cors', (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.send({ msg: 'This has CORS enabled 🎈' });
});

Ecco cosa succede:

L’header Access-Control-Allow-Origin è impostato su *, il che significa che qualsiasi origine è autorizzata ad accedere a questa risorsa.
È un modo rapido e semplice per abilitare CORS a scopo dimostrativo. (In seguito, potresti voler limitare l’accesso solo a origini specifiche.)

🔁 Aggiorna il client React

Ora torna alla tua app React e aggiorna l’URL della fetch per puntare al nuovo endpoint:

const response = await fetch('http://localhost:8080/cors', { mode: 'cors' });

Salva le modifiche e riavvia il server di sviluppo di React se necessario.

🧪 Provalo

Apri il browser e aggiorna l’app. Questa volta, il browser dovrebbe consentire il passaggio della risposta e vedrai nel log della console quanto segue:

{ data: { msg: 'This has CORS enabled 🎈' } }

Successo! Hai appena effettuato la tua prima richiesta cross-origin con CORS configurato correttamente.

Conferma della correzione: CORS funziona!

Una volta impostato correttamente l’header CORS sul server, l’errore scompare e la tua app React riceve con successo la risposta in JSON. 🎉 Tutto funziona come previsto! Non dimenticare però che potresti dover riavviare il server backend dopo aver apportato modifiche affinché abbiano effetto.

🎯 Limitare CORS a origini specifiche

Invece di usare il carattere jolly (*), che consente a qualunque origine di accedere alle tue risorse, puoi limitare CORS a un dominio specifico—per esempio, il tuo server di sviluppo React:

app.get('/cors', (req, res) => {
  res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.send({ msg: 'This has CORS enabled 🎈' });
});

Questo è consigliato in produzione per impedire a siti non autorizzati di accedere alla tua API.

⚠️ Quando non puoi modificare il server

Sebbene modificare il server sia il modo più pulito e robusto per gestire CORS, non è sempre un’opzione. Molti sviluppatori incontrano questo problema quando usano API di terze parti—per autenticazione, notifiche, servizi email e altro. In tali casi, non puoi cambiare la policy CORS del server.

Se succede, sei bloccato… o forse no?

🧞‍♂️ Workaround: usare un proxy in React

Ecco una soluzione ingegnosa specifica per lo sviluppo con React: instrada (proxy) le richieste API attraverso il server di sviluppo.

Pensa al proxy un po’ come rispondere all’appello per un compagno di classe—la tua app “finge” che la richiesta provenga da una fonte diversa (cioè l’origine del server), aggirando le restrizioni della SOP del browser.

✏️ Come configurare un proxy

Apri il file package.json nella root del progetto React.
Aggiungi il campo proxy:

{
  ...
  "proxy": "http://localhost:8080"
}

Riavvia il server di sviluppo React (npm start) e ora tutte le richieste verranno silenziosamente instradate attraverso il backend.

Quando recuperi dati da /cors, per esempio:

const response = await fetch('/cors');

Internamente, ciò viene mappato su http://localhost:8080/cors, facendo apparire la richiesta come same-origin al browser.

🧪 Vuoi usare un servizio di terze parti?

Nessun problema! Puoi eseguire il proxy anche verso quello:

{
  ...
  "proxy": "https://randomservice.com"
}

Tieni a mente:

Solo le richieste non-HTML (tipicamente API) vengono proxyate.
L’header Accept della tua richiesta non deve essere text/html.
Per configurazioni più complesse (ad es., proxy multipli), usa http-proxy-middleware per definire un comportamento di proxy personalizzato.

🧹 Conclusioni: best practice per CORS in React

Quando si parla di CORS, ecco cosa dovresti ricordare:

Risolvi sempre CORS a livello di server—è la soluzione più affidabile e sicura.
Durante lo sviluppo, il proxy di React può aiutarti a evitare problemi CORS senza necessità di modifiche al server.
Se non controlli il server dell’API, contatta il provider—oppure usa un tuo server proxy.
Strumenti come le estensioni Chrome CORS Unblock possono funzionare temporaneamente, ma non vanno mai usati in produzione.
Specifica sempre { mode: 'cors' } nelle richieste fetch per mantenere esplicito il comportamento.
Comprendi che la maggior parte dei workaround lato browser non funzionerà una volta distribuita l’app—pianifica per la produzione fin da subito.

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs