ABILITARE CORS SU EXPRESS

A

INtroduzione

Il tuo frontend sta sollevando il seguente errore?

CORS: XMLHttpRequest cannot load https://xxx.com/apiRequest header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

Allora significa che il tuo backend non ha abilitato il CORS.

Si parla cross-origin HTTP request (CORS) quando un client richiede una risorsa di un differente dominio, protocollo o porta. Ad esempio una web application con dominio X non può richiedere una risorsa ad un dominio Y tramite AJAX request se Y non ha abilitato il CORS. Un precedente articolo molto interessante spiega in dettaglio cosa è il CORS e come funziona. Prima di continuare la lettura ti consiglio quindi di leggere l’articolo CORS IN DETTAGLIO poiché verrà dato per scontato che tu conosca le basi del CORS.

 

 

cors su node.js

Il modo più semplice per abilitare il CORS sul tuo backend scritto in Node.js è quello di utilizzare il modulo npm cors. Procediamo quindi ad aggiungere la dipendenza al modulo cors:

npm install --save cors

Possiamo adesso importare il modulo cors e utilizzarlo come middleware:

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

// varie route ...
app.listen(80, function () {
  console.log('CORS abilitati')
})

Se proviamo adesso ad effettuare una richiesta http al server possiamo notare che ogni risposta conterrà il seguente header http

access-control-allow-origin:*

L’header Access-Control-Allow-Origin determina quali origini sono abilitate al CORS; nel nostro caso * determina che sono abilitate tutte le origini. Se vuoi restringere invece l’abilitazione al CORS solo a  un determinato dominio puoi procedere nel seguente modo:

app.use(cors({
  origin: 'http://italiancoders.it'
}));

ABILITARE HEADER custom

Di default cors espone nelle risposte http solo i seguenti header:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

Se avessimo bisogno di esporre nelle risposte http altri header? Ad esempio spesso viene utilizzato l’header x-auth-token per contenere il token di autenticazione. In questo caso possiamo abilitare tale header nel seguente modo:

app.use(cors({
  exposedHeaders: ['x-auth-token'],
}));

Dopo quest’ultima modifica, le risposte del server conterranno un altro header:

Access-Control-Expose-Headers:x-auth-token

il quale permette di esporre al client l’header x-auth-token.

ABILITARe CORS per le PreFlight request

Se hai letto l’articolo CORS IN DETTAGLIO saprai che alcune richieste CORS sono considerate “complesse” e richiedono una richiesta iniziale di OPTIONS (chiamata “richiesta PREFLIGHT“). Esempi di  CORS PREFLIGHT sono quelli di verbo HTTP diverso da GET / HEAD / POST (come DELETE) o che utilizza header custom. Per abilitare il PREFLIGHT è necessario aggiungere un nuovo controller  per intercettare le richieste OPTIONS. Per fare questo basta aggiungere la seguente configurazione al tuo progetto:

app.options('*', cors()) // da includere prima delle altre routes

bibliografia e riferimenti

A proposito di me

Dario Frongillo

Uno degli admin di Italiancoders e dell iniziativa devtalks.
Dario Frongillo è un software engineer e architect, specializzato in Web API, Middleware e Backend in ambito cloud native. Attualmente lavora presso NTT DATA, realtà di consulenza internazionale.
E' membro e contributor in diverse community italiane per developers; Nel 2017 fonda italiancoders.it, una community di blogger italiani che divulga articoli, video e contenuti per developers.

I nostri Partner

Gli articoli più letti

Articoli recenti

Commenti recenti