richieste Ajax su cross-domain (CORS)

Quando sviluppiamo le nostre applicazioni web spesso capita di dover effettuare delle chiamate ajax su risorse che non fanno parte del nostro dominio. Questa particolare richiesta è anche detta “cross-origin request”.

Ad esempio supponiamo di dover fare una richiesta ajax ad una particolare api dal nostro dominio www.mydomain.com al dominio www.otherdomain.com. Per questioni di sicurezza il browser blocca le richieste http su domini esterni. Ci troviamo quindi di fronte a un errore da parte del browser visualizzabile sulla console di debug:

XMLHttpRequest cannot load http://otherdomain.com/api/login?_dc=1390127798456. The request was redirected to ‘http://otherdomain.com/api/login/?_dc=1390127798456', which is disallowed for cross-origin requests that require preflight.

Esistono diverse soluzioni per far fronte a questo problema, ad esempio JSON-P

Quella che analizzeremo in questo contesto si chiama CORS. Questo meccanismo funziona con l’aggiunta di intestazioni HTTP tra le richieste e le risposte tra il CLIENT e il SERVER. Questo meccanismo è gestito automaticamente dal browser e quindi lo sviluppatore web non deve preoccuparsi di eventuali dettagli. Il server deve essere in grado di supportare il CORS.

SEMPLICI RICHIESTE:

Quando effettuiamo semplici richieste ajax di tipo Post o Get il browser include in maniera automatica all’interno della richiesta http le intestazioni necessaria.

Per esempio se effettuassimo una richiesta GET tramite il framework jQuery su www.otherdomain.com come questa:

[code]
$.get(url:’http://otherdomain.com/resource');
[/code]

il browser inserisce automaticamente nel header della richiesta http le seguenti informazioni

[code]
GET http://otherdomain.com/resource/ HTTP/1.1
Referer: http://mydomain.com/myapp/
Origin: http://mydomain.com
[/code]

In sostanza il browser sta inserendo il campo Origin in cui definisce chi sta effettuato la richiesta.

Il server poi riceve la richiesta e risponde al browser.

Il trucco ora sta nell’inserire nel header della risposta il campo “Access-Controll-Allow-Origin” con all’interno il dominio o i domini che abilitati ad affettuare cross-request sul dominio esterno . Infatti quando il browser vede che il nome del dominio all’interno del campo Access-Control-Allow-Origin, corrisponde allo stesso dominio da cui è partita la richiesta allora la elabora altrimenti la blocca.

Esempio header risposta da parte del server e che viene elaborata dal browser:

[code]
Access-Control-Allow-Origin: http://mydomain.com
Content-Type: application/json
[/code]

Per abilitare la cross-request potete provare una cosa del genere (in php):

[code]
<?php
header(“Access-Control-Allow-Origin”,”*”);
header(“Access-Control-Allow-Methods”,”GET,PUT,POST,DELETE”);
header(“Access-Control-Allow-Headers”,”Content-Type”);
?>
[/code]

oppure in alternativa potete modificare il file .htaccess aggiungendo queste direttive

[code]
RewriteEngine On
Options +FollowSymlinks
Header add Access-Control-Allow-Origin “*”
Header add Access-Control-Allow-Headers “origin, x-requested-with, content-type”
Header add Access-Control-Allow-Methods “PUT, GET, POST, DELETE, OPTIONS”

[/code]

Per maggiori approfondimenti leggetevi questo articolo da cui ho preso particolare spunto:
http://techblog.constantcontact.com/software-development/using-cors-for-cross-domain-ajax-requests/