Ciao developer, sei alle prime armi con le Mule e non sai come abilitare il CORS in Mule API?
Tranquillo è successo anche a me!
Prima di rivelarti questo grande segreto cerchiamo prima di capire che cos’è il CORS e come funziona il meccanismo.
Che cos’è il CORS
Si parla di 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 miodominio.it non può richiedere una risorsa ad un dominio altrodominio.it tramite AJAX request se altrodominio.it non ha abilitato il CORS.
Praticamente la same origin policy (SOP) vieta il ricaricamento da altri server quando si visita un sito web. Tutti i dati devono provenire dalla stessa origine, quindi dallo stesso server.
Per approfondire nel dettaglio il funzionamento vi consiglio di leggere la doc su mozilla.org, perché lo scopo di questo articolo è come abilitare il CORS nel connettore HTTP di Mulesoft.
Come abilitare il CORS
Ora siamo pronti per abilitare il CORS in Mule API 🙂
In realtà, il termine Mule API è fuorviante perché noi stiamo abilitando questo meccanismo a livello di connettore HTTP, diverso sarebbe gestire questo aspetto a livello di definizione della API (RAML).
Per abilitare il nostro connettore al CORS basta semplicemente aggiungere un interceptor:
<http:listener-config name="CORS" doc:name="HTTP Listener config" doc:id="4f7c9245-8ae4-4d2c-8899-facddae46f43" >
<http:listener-connection host="0.0.0.0" port="8082"/>
<http:listener-interceptors >
<http:cors-interceptor allowCredentials="true">
<http:origins>
<http:public-resource />
</http:origins>
</http:cors-interceptor>
</http:listener-interceptors>
</http:listener-config>Come potete vedere è possibile abilitare l’header Access-Control-Allow-Credentials nella risposta.
Vi lascio un esempio creato con Mule runtime 4.3 e Studio 7.6.
L’esempio è composto da tre listener HTTP:
- INDEX: ritorna una pagina index.html con due pulsanti che, con chiamate Ajax con jQuery, simulano il funzionamento del CORS;
- CORS: connettore abilitato per il CORS;
- NOCORS: connettore non abilitato al CORS.
Ogni listener HTTP è configurato su porte diverse: 8081, 8082, 8083.
Codice di esempio: https://bitbucket.org/Bonny/cors-example.git
Spero di esserti stato d’aiuto con questo breve e semplice tutorial.
Leggi anche: Proprietà di configurazione in Mule