web-dev-qa-db-fra.com

Autoriser l'en-tête Access-Control-Allow-Origin à l'aide de l'API de récupération HTML5

J'utilise l'API de récupération 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)
});

Je suis capable d'utiliser json normal mais incapable de récupérer les données ci-dessus. Il jette une erreur:

L'API de récupération ne peut pas être chargée https://davidwalsh.name/demo/arsenal.json . Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin ' http: // localhost ' n'est donc pas autorisé à accéder. Si une réponse opaque répond à vos besoins, définissez le mode de la demande sur "No-cors" pour extraire la ressource avec CORS désactivé.

htmlapiurlfetch-api
48
iNikkz

Comme le dit epascarello, le serveur CORS doit être activé sur le serveur qui héberge la ressource. Ce que vous pouvez faire côté client (et probablement ce que vous pensez) définit le mode de récupération dans CORS (bien que ce soit le paramètre par défaut, je crois):

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

Cependant, ceci encore exige que le serveur active également CORS et permette à votre domaine de demander la ressource.

Découvrez le documentation CORS , et ce vidéo géniale d'Udacity expliquant le politique de même origine .

Vous pouvez également utiliser le mode no cors du côté client, mais cela vous donnera simplement une réponse opaque (vous ne pouvez pas lire le corps, mais la réponse peut toujours être mise en cache par un agent de maintenance ou consommée par certaines API, comme <img>):

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

J'ai eu mon code avant en cours d'exécution dans http: // localhost: 30 et mon API (code Backend) en cours d'exécution à http: // localhost: 50

Utilisait l'API d'extraction pour appeler l'API. Initialement, il jetait une erreur "cors". Puis ajouté ce code ci-dessous dans mon code API Backend, permettant à Origin et à l’en-tête de n’importe où.

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

Cependant, vous devez limiter les origines dans le cas d’autres environnements tels que stage, prod.

6
smsivaprakaash

Je sais que ceci est un message plus ancien, mais j'ai trouvé ce qui fonctionnait pour moi afin de corriger cette erreur: utiliser l'adresse IP de mon serveur au lieu d'utiliser le nom de domaine dans ma demande d'extraction. Donc par exemple:

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/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)
});
3
MattG

Si vous utilisez nginx essayez ceci

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-Origin-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,Origin,x-requested-with,access-control-allow-Origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }
0
Caliari