HTML5 getirme API'sini kullanarak Access-Control-Allow-Origin üstbilgisine izin ver API

Question

HTML5 getirme API'sini kullanıyorum.

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) 
     }); 

Normal json'u kullanabiliyorum ama yukarıdaki api url verisini alamıyorum. epascarello Dediğim gibi

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

, kaynağı barındıran sunucu CORS etkinleştirilmiş olması gerekmektedir: Bu hatayı atar. istemci tarafında yapabilirsiniz (ve muhtemelen ne düşünüyorsun) (bu İnanıyorum varsayılan ayar rağmen) CORS için getirme modunu ayarlanır Ne:

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

Ancak bu hala gerektirir CORS'i de etkinleştirmek için sunucuyu ve etki alanınızın kaynağı talep etmesini sağlayın.

CORS documentation ve Same Origin Policy açıklayan bu awesome Udacity video denetleyin.

İstemci tarafında no-cors modunu da kullanabilirsiniz, ancak bu size yalnızca opak bir yanıt verecektir (gövdeyi okuyamazsınız, ancak yanıt hala bir hizmet çalışanı tarafından önbelleğe alınabilir veya bir kısmı tarafından tüketilebilir. API's (<img> gibi):

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