Erlaube Access-Control-Allow-Origin-Header mit HTML5-Fetch-API

Question

Ich verwende HTML5-Fetch-API.

Ich bin in der Lage, normal json zu verwenden, aber nicht die Daten der oben genannten API abrufen. Es wirft Fehler:

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

Wie epascarello sagte, der Server, der die Ressource hostet muss CORS aktiviert sein. Was können Sie auf der Client-Seite tun (und wahrscheinlich das, was Sie denken an) eingestellt wird, um die Art der zu CORS holen (obwohl dies die Einstellung Ich glaube Standardeinstellung):

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

Doch diese noch erfordert die Server, um auch CORS zu aktivieren und Ihrer Domäne zu erlauben, die Ressource anzufordern.

Überprüfen Sie die CORS documentation, und diese awesome Udacity video erklären die Same Origin Policy.

Sie können auf der Client-Seite auch den No-Cors-Modus verwenden, aber dies gibt Ihnen nur eine undurchsichtige Antwort (Sie können den Text nicht lesen, aber die Antwort kann immer noch von einem Service-Mitarbeiter zwischengespeichert oder von einigen konsumiert werden APIs, wie <img>):

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