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

Software architect con un forte background in Java, Architettura REST, framework Spring , Database Design,progettazione e sviluppo di SPA e RIA Web application con framework Javascript. Attualmente mi occupo di sviluppo soluzioni software in ambito Banking e Finance: in particolare progettazione e sviluppo di applicativi web based per la realizzazione di sistemi di trading, interfacce con i mercati finanziari e di servizi real time.

Di Dario Frongillo

Gli articoli più letti

Articoli recenti

Commenti recenti