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
- CORS IN DETTAGLIO (Dario Frongillo, italianCoders)
- PAGINA GITHUB UFFICIALE DEL MODULO cors
