Contenuti

CORS Policy No ‘Access-Control-Allow-Origin’ – Azure Function

CORS: Chi sei?

CORS è una sigla ed ha un significato ben preciso. Con questo termine intendiamo Cross-Origin Resource Sharing e (facendola breve) si tratta di HTTP Header aggiuntivi per autorizzare l’uso di risorse (nel nostro caso Azure Function) da server diversi rispetto a dove si trova la risorsa stessa.

CORS policy: No ‘Access-Control-Allow-Origin’

Quando il server sorgente (da cui parte la richiesta) non viene autorizzato sul server di destinazione ci viene fornito un messaggio di errore. L’altro giorno dovevo mostrare in una tabella i risultati di una Azure Function. Tutto bene coi test locali, ma appena ho messo online il tutto ho ricevuto il seguente errore:

Access to XMLHttpRequest at ‘https://.azurewebsites.net/api/ExportData?code=’ from origin ‘’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

L’errore -che a vederlo sembra brutto- è di facile soluzione e bastano davvero pochissimi passi per risolverlo.

CORS policy: Azure Function

Per gestire le “CORS policy” in Azure Function basta svolgere le seguenti operazioni:

  1. Aprire il portale Azure
  2. Selezionare la Azure Function desiderata
  3. Una volta aperta la Azure Function, selezionare il tab “Platform features
  4. Nella sezione API è presente la voce CORS

CORS: La configurazione

Selezionando la voce CORS si aprirà una nuova scheda con la seguente descrizione

Cross-Origin Resource Sharing (CORS) allows JavaScript code running in a browser on an external host to interact with your backend. Specify the origins that should be allowed to make cross-origin calls (for example: http://example.com:12345). To allow all, use “*” and remove all other origins from the list. Slashes are not allowed as part of domain or after TLD.

Cosa significa? Per autorizzare l’accesso da fonti esterne ora mancano solamente due passaggi

  1. Spuntare (se non lo è già) la voce " Enable Access-Control-Allow-Credentials "
  2. Inserire (una per riga) le sorgenti da cui può essere effettuata la richiesta dei dati. Se vogliamo fare l’acceso a chiunque bisogna mettere “*****” (=asterisco) 

Terminato l’inserimento delle origini, bisogna salvare tutto tramite il pulsante “Save” posto in alto.

ATTENZIONE: Prima di chiudere vorrei segnalare una cosa. Mettere asterisco è “comodo” perché non c’è necessità di sbattersi ad inserire le singole fonti. Il lato negativo è semplice. Chiunque scopra il vostro url potrà ottenere i dati anche se non autorizzato a vederli.