Autorizza l'intestazione Access-Control-Allow-Origin utilizzando l'API di recupero HTML5

Question

Sto utilizzando l'API di recupero 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) 
     }); 

Sono in grado di utilizzare il json normale ma non riesco a recuperare i dati di sopra api url. getta errore:

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

Come epascarello Detto questo, il server che ospita la risorsa deve avere CORS abilitato. Cosa si può fare sul lato client (e probabilmente quello che si sta pensando di) è impostato la modalità di recupero per CORS (anche se questo è l'impostazione predefinita credo):

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

Tuttavia questo ancora richiede la server per abilitare CORS e consentire al dominio di richiedere la risorsa.

Controllare il CORS documentation e questo awesome Udacity video che spiega Same Origin Policy.

È anche possibile utilizzare la modalità no-cors sul lato client, ma ciò fornirà una risposta opaca (non è possibile leggere il corpo, ma la risposta può ancora essere memorizzata nella cache da un operatore o consumata da alcuni API, come <img>):

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