Zezwalaj na nagłówek Access-Control-Allow-Origin za pomocą interfejsu HTML5 Fetch API

Question

Używam API pobierania 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) 
     }); 

Jestem w stanie używać normalnego json, ale nie mogę pobrać danych z powyższego adresu URL. To wyrzuca błąd:

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

Jak epascarello powiedział, serwer, który obsługuje zasób musi mieć włączoną obsługę CORS. Co można zrobić po stronie klienta (i prawdopodobnie to, co myślisz o) ustawiony jest tryb sprowadzić do CORS (choć jest to ustawienie domyślne wierzę):

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

Jednak to nadal wymaga serwer, aby włączyć CORS i zezwolić twojej domenie na żądanie zasobu.

Sprawdź CORS documentation, a to awesome Udacity video wyjaśniając Same Origin Policy.

Można również użyć trybu bezkostowego po stronie klienta, ale spowoduje to tylko nieprzejrzystą odpowiedź (nie można odczytać treści, ale odpowiedź może zostać zapisana w pamięci podręcznej przez pracownika serwisu lub skonsumowana przez niektórych Interfejsy API, takie jak <img>):

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