Questo sito utilizza cookie, anche di terze parti, per migliorare la tua esperienza e offrire servizi in linea con le tue preferenze. Chiudendo questo banner, scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all’uso dei cookie

Rimani informato sugli aggiornamenti di SOS-OFFICE. Inserisci il tuo indirizzo e-mail: Informativa sulla privacy

Dal libro JavaScript Capitolo 15, problema con CORS policy

Vai
2 Mesi 1 Settimana fa #588 da Michele
COM_KUNENA_MESSAGE_CREATED_NEW
Ciao,
ho acquistato il libro di Alessandra Salvaggio, Gualtiero Testa (JavaScript).
Non trovo nel forum la sezione giusta, per cui scrivo qua sperando che Salvaggio o Testa possano rispondermi.
Nota: il libro non lo ancora finito, ma è spiegato veramente bene ! Complimenti.

Sto sviluppando (non faccio di mestiere il programmatore, per cui programmo solo per passione) un mio programmino che usa anche javascript.

Cercavo di imparare a leggere un file in locale, per cui mi sono messo a studiare il seguente codice del libro, ma ho già un primo errore con Edge browser:
File allegato:


Il codice in oggetto è nel capitolo 15 (lo riporto solo per comodità).
Html:
<!doctype html>
<html lang="it">

<head>
    <meta charset="utf-8">
    <title>JSON 1</title>
    <meta name="description" content="JSON 1">
</head>

<body>
    <p id="output" />

    <script type="text/Javascript">
        'use strict';
        const file = 'persona.json';

        // Creo un oggetto XMLHttpRequest per fare la chiamata al servizio
        // vedi https://developer.mozilla.org/it/docs/Web/API/XMLHttpRequest
        const request = new XMLHttpRequest();

        //altrimenti si aspetta un XML
        request.overrideMimeType('application/json');

        // Definisco quale file (file) e come chiamarlo (comando GET)
        request.open('GET', file, true);

        // Definisco cosa fare quando il servizio mi risponde
        // la funzione onload sarà chiamata dopo l'arrivo della risposta
        // la funzione onload è una funzione callback
        request.onload = function () {
            //dato è un oggetto, perhè il file json contiene un solo oggetto
            const dato = JSON.parse(this.responseText);
            let HTML = `<div><h1>${dato.nome} ${dato.cognome}</h1></div>`;
            mostraRisultato(HTML);
        };

        // Definisco cosa fare quando la chiamata al servizio fallisce
        // è una funzione callback richiamata in caso di errore (passato come argomento)
        request.onerror = errore => mostraRisultato(`<pre>ERRORE: ${errore}</pre>`);

        // Chiama il servizio. Di fatto inizia la chiamata che procede come processo in background
        // la funzione send() termina SENZA attendere il completamento della chiamata che
        // avviene in modalità ASINCRONA
        request.send(null);

        // mostra il testo passato come argomento come inner HTML di un elememnto del DOM
        const mostraRisultato = testo => document.getElementById('output').innerHTML = testo;
    </script>

</body>

</html>

Il file persona.json:
{
  "nome": "Giovanni",
  "cognome": "Rossi",
  "sesso": "maschio",
  "vivente": true,
  "età": 27,
  "indirizzo": {
    "via": "Buonarroti 18",
    "comune": "Alpette",
    "provincia": "TO",
    "CAP": "10080"
  },
  "numeriTelefono": [
    {
      "tipo": "casa",
      "numero": "0000000"
    },
    {
      "tipo": "cellulare",
      "numero": "111111111"
    }
  ],
  "titoli": [
    "sig.",
    "dott."
  ]
}

Sembra che il problema derivi da CORS policy:
Access to XMLHttpRequest at 'file:///C:/Users/...../source/repos/Libri/EserciziJavascript/Esercizi/15_json/persona.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.

NOTA IMPORTANTE:
Ricordo che il file html non sarà letto dai browsers Chrome, Firefox, Egce, Opera ecc.. bensì da un componente di lettore HTML (come per esempio il componente WebWiew o WebBrowser di VisualStudio).

Forse questo metodo di lettura file è sorpassato ? Some Help ?

Grazie.

Si prega Accedi o Crea un account a partecipare alla conversazione.

Vai
2 Mesi 1 Settimana fa #589 da Gualtiero
COM_KUNENA_MESSAGE_REPLIED_NEW
Ciao Michele,

grazie per i complimenti sul libro.

Prima di risponderti, fammi fare una importante premessa.

Nel corso degli anni, sono stati aggiunti nei browser meccanismi di sicurezza per rendere più sicuro Internet.

Uno dei più importanti è la Same Origin Policy ( https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy ) che impedisce ad una pagina HTML aperta in un browser di accedere a risorse (file, immagini,...) di domini diversi.

Ad esempio se la pagina si trova su www.miosito.it non può fare chiamate AJAX al sito www.altrosito.org . Questo meccanismo impedisce, ad esempio, che qualcuno crei un sito fake simile ad un altro.

SOP è un meccanismo molto rigido e bloccante ed, in alcuni casi, serve superarlo. Esempio: una azienda che ha più domini e che vuole condividere le risorse tra di essi.

Per superare questa rigidità, è stato creato CORS (Cross-Origin Resource Sharing, ( https://developer.mozilla.org/it/docs/Web/HTTP/CORS ) che permette ai siti di "accettare" che altri accedano alle proprie risorse.

In CORS, il sito chiamato dice al browser, attraverso opportuni header HTTP, chi può usare le risorse. Il controllo effettivo è demandato al browser.

Tutti i browser moderni supportano SOP e CORS.

Ritornando al problema che segnali, CORS non permette di accedere ai file locali. In realtà l'esempio del capitolo 15 mira a descrivere come leggere un file JSON via chiamata AJAX. Il fatto che il file JSON sia locale è per comodità del lettore. Nella realtà, il file risiederà sullo stesso server della pagina che contiene l'HTML. Essendo entrambe sullo stesso server, SOP non bloccherà la chiamata. In questo caso la chiamata AJAX avverrà con protocollo http/https e non con protocollo file.

Se vuoi comunque fare delle prove, esistono modi per disabilitare CORS nei browser. Su Internet puoi trovare diverse pagine come queste
- https://medium.com/@siddhartha.ng/disable-cross-origin-on-chrome-for-localhost-c644b131db19
- https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/ .

Spero esserti stato di aiuto.

Gualtiero Testa

Si prega Accedi o Crea un account a partecipare alla conversazione.

Vai
2 Mesi 1 Settimana fa #590 da Michele
COM_KUNENA_MESSAGE_REPLIED_NEW
Grazie per la risposta.
Ciò che mi avevano detto altre persone, lei è stato più chiaro ed esaustivo.
Grazie.

Si prega Accedi o Crea un account a partecipare alla conversazione.

Tempo creazione pagina: 0.360 secondi
Powered by Forum Kunena
Joomla templates by a4joomla