Come Risolvere l’Errore CORS in React con Backend Express: Guida Pratica

by

Se stai sviluppando un’applicazione full stack con React nel frontend ed Express nel backend, prima o poi ti sei imbattuto in quel fastidioso messaggio nella console del browser: “Access to XMLHttpRequest has been blocked by CORS policy”. È uno degli errori più frequenti tra gli sviluppatori JavaScript, ma anche uno dei più fraintesi.

In questa guida pratica vedremo cos’è realmente l’errore CORS in React con Express, perché si verifica e soprattutto come risolverlo correttamente sia in fase di sviluppo che in produzione, con esempi di codice testati e funzionanti.

Cos’è l’errore CORS e perché si verifica

CORS è l’acronimo di Cross-Origin Resource Sharing. Non si tratta di un bug, ma di una politica di sicurezza implementata dai browser moderni per impedire che una pagina web possa effettuare richieste verso un dominio diverso da quello da cui è stata caricata, a meno che il server di destinazione non lo autorizzi esplicitamente.

Quando la tua app React gira su http://localhost:3000 e tenta di chiamare un’API Express su http://localhost:5000, il browser considera questi due indirizzi come origini diverse (origin = protocollo + dominio + porta). Senza gli header HTTP corretti dal backend, la richiesta viene bloccata.

Punto chiave da capire

L’errore CORS non riguarda React. React è solo il messaggero. Il problema, e quindi la soluzione, vanno gestiti nel backend Express, configurando correttamente i response header che indicano al browser quali origini sono autorizzate.

react express code

Quando si verifica l’errore CORS in un’app React + Express

  • Frontend e backend girano su porte differenti in locale
  • Il frontend è hostato su un dominio (es. Vercel) e il backend su un altro (es. Railway)
  • Si effettuano richieste con cookie o header di autenticazione senza configurare credentials
  • Si utilizzano metodi HTTP diversi da GET come PUT, DELETE, PATCH che richiedono una preflight request

Soluzione 1: Installare e configurare il middleware cors

Il modo più pulito per risolvere l’errore è usare il pacchetto ufficiale cors di Express. Installalo nel progetto backend:

npm install cors

Configurazione base per lo sviluppo

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

app.use(cors());
app.use(express.json());

app.get('/api/users', (req, res) => {
  res.json({ message: 'CORS funziona correttamente' });
});

app.listen(5000, () => console.log('Server avviato sulla porta 5000'));

Questa configurazione abilita CORS per tutte le origini. Va benissimo in fase di sviluppo, ma è insicura in produzione.

Configurazione sicura per la produzione

const corsOptions = {
  origin: ['https://miosito.com', 'https://www.miosito.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  optionsSuccessStatus: 200
};

app.use(cors(corsOptions));
react express code

Soluzione 2: Gestire le richieste con credenziali

Se la tua app React invia cookie o token tramite header (autenticazione JWT, sessioni), devi configurare credentials sia lato server che lato client.

Lato Express

app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

Lato React (con Axios)

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000',
  withCredentials: true
});

export default api;

Lato React (con Fetch)

fetch('http://localhost:5000/api/users', {
  method: 'GET',
  credentials: 'include'
});

Attenzione: quando usi credentials: true, NON puoi usare il wildcard * come origin. Devi specificare esplicitamente i domini autorizzati.

Soluzione 3: Usare il proxy di React in sviluppo

Un’alternativa elegante per evitare problemi CORS in locale è configurare il proxy nel package.json del progetto React (Create React App):

{
  "name": "mia-app",
  "version": "0.1.0",
  "proxy": "http://localhost:5000"
}

Con Vite, invece, devi modificare vite.config.js:

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        secure: false
      }
    }
  }
});

In questo modo le richieste partono dalla stessa origine del frontend e il browser non solleva alcun errore CORS.

react express code

Errori comuni da evitare

Errore Causa Soluzione
Wildcard con credenziali Usare origin: '*' con credentials: true Specificare l’origine esatta
Middleware nell’ordine sbagliato Definire le route prima di app.use(cors()) Mettere cors prima di tutte le route
Header Authorization bloccato allowedHeaders non configurato Aggiungere Authorization in allowedHeaders
Preflight OPTIONS fallita Server non risponde a OPTIONS Aggiungere app.options('*', cors())
Porta sbagliata in origin Mismatch tra porta React e quella consentita Verificare la porta effettiva del frontend

Configurazione completa pronta all’uso

Ecco un setup completo che gestisce sia sviluppo che produzione, basato su variabili d’ambiente:

const express = require('express');
const cors = require('cors');
require('dotenv').config();

const app = express();

const allowedOrigins = process.env.NODE_ENV === 'production'
  ? ['https://miosito.com', 'https://www.miosito.com']
  : ['http://localhost:3000', 'http://localhost:5173'];

app.use(cors({
  origin: function (origin, callback) {
    if (!origin) return callback(null, true);
    if (allowedOrigins.indexOf(origin) === -1) {
      return callback(new Error('Origine non consentita dal CORS'), false);
    }
    return callback(null, true);
  },
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

app.options('*', cors());
app.use(express.json());

app.listen(process.env.PORT || 5000);
react express code

Come fare il debug dell’errore CORS

  1. Apri DevTools e vai nella tab Network
  2. Identifica la richiesta che fallisce e controlla i Response Headers
  3. Verifica la presenza di Access-Control-Allow-Origin
  4. Controlla se c’è una richiesta OPTIONS prima della tua richiesta principale (preflight)
  5. Confronta il valore di Origin nella richiesta con quello configurato nel server

FAQ sull’errore CORS in React ed Express

Posso risolvere l’errore CORS solo dal frontend React?

No, non direttamente. CORS è una politica controllata dal browser basata sugli header inviati dal server. Puoi però aggirare il problema in sviluppo usando un proxy nella configurazione di React o Vite.

Devo disabilitare CORS in produzione?

Assolutamente no. CORS è una protezione importante. In produzione configuralo correttamente specificando solo i domini autorizzati ad accedere alla tua API.

Perché la richiesta funziona con Postman ma non dal browser?

Postman e curl non applicano la same-origin policy, perché non sono browser. Solo il browser blocca le richieste cross-origin per motivi di sicurezza dell’utente.

Cosa sono le richieste preflight?

Sono richieste OPTIONS che il browser invia automaticamente prima della richiesta principale per verificare se il server accetta il metodo, gli header e l’origine. Avvengono per richieste “non semplici”, come PUT, DELETE o richieste con header personalizzati.

Il middleware cors va messo prima o dopo le route?

Sempre prima della definizione delle route. Se lo metti dopo, le route non riceveranno la configurazione CORS e l’errore persisterà.

Conclusione

Risolvere l’errore CORS tra React ed Express non è complicato una volta capito che il problema sta nel backend, non nel frontend. Con il middleware cors configurato correttamente, distinguendo tra ambiente di sviluppo e produzione, e prestando attenzione agli errori comuni come il mix di wildcard e credenziali, puoi rendere la tua applicazione full stack sicura e funzionale.

Se hai bisogno di supporto nello sviluppo della tua applicazione web full stack o vuoi una consulenza personalizzata sull’architettura del tuo progetto, il team di Alede Ro Design è a tua disposizione.

Leave a Comment