headers - Permitir el encabezado Access-Control-Allow-Origin mediante la API de obtención HTML5

access-control-request-headers authorization

Question

Estoy usando HTML5 fetch API.

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

Soy capaz de usar json normal pero no puedo recuperar los datos del api url anterior. Lanza el error:

Fetch API no puede cargar https://davidwalsh.name/demo/arsenal.json . No hay ningún encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen '' http: // localhost ''. Si una respuesta opaca satisface sus necesidades, configure el modo de la solicitud en ''no-cors'' para recuperar el recurso con CORS desactivado.

Answer 1

Como dijo epascarello, el servidor que aloja el recurso debe tener habilitado CORS. Lo que puede hacer en el lado del cliente (y probablemente en lo que está pensando) es establecer el modo de búsqueda en CORS (aunque creo que esta es la configuración predeterminada):

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

Sin embargo, esto aún requiere que el servidor habilite CORS también, y permita que su dominio solicite el recurso.

Consulte la documentación de CORS y este increíble video de Udacity que explica la Política de Same Origin .

También puede usar el modo no-cors en el lado del cliente, pero esto solo le dará una respuesta opaca (no puede leer el cuerpo, pero la respuesta aún puede ser almacenada en caché por un trabajador del servicio o consumida por algunas API, como <img> ):

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