Autoriser l'en-tête Access-Control-Allow-Origin à l'aide de l'API fetch HTML5

Question

J'utilise l'API de récupération HTML5.

 var request = new Request('https://davidwalsh.name/demo/arsenal.json');

        fetch(request).then(function(response) {
        // Convert to JSON
            return response.json();
        }).then(function(j) {
            // Yay, `j` is a JavaScript object
            console.log(JSON.stringify(j)); 
        }).catch(function(error) {  
            console.log('Request failed', error)  
        });
 

Je suis en mesure d'utiliser json normal mais je ne parviens pas à récupérer les données de l'URL api ci-dessus. Cela génère une erreur:

 Fetch API cannot load https://davidwalsh.name/demo/arsenal.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
 

Answer 1

Comme epascarello dit, le serveur qui héberge la ressource doit avoir de la SCRO activé. Ce que vous pouvez faire sur le côté client (et probablement ce que vous envisagez d') est de définir le mode d'extraction de la SCRO (bien que ce soit le paramètre par défaut je crois):

fetch(request, {mode: 'cors'});

Cependant ce encore exige le serveur pour activer la SCRO ainsi, et de permettre à votre domaine à la demande de la ressource.

Découvrez la SCRO de la documentation, et ce génial Udacity vidéo expliquant la Même Origine.

Vous pouvez également utiliser no-scro mode sur le côté client, mais ce sera juste vous donner un opaque réponse (vous ne pouvez pas lire le corps, mais la réponse peut encore être mis en cache par un travailleur des services ou consommés par certaines API, comme <img>):

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});