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 je ne parviens pas à récupérer les données de l'URL d'API ci-dessus. Il jette une erreur:

L'API de récupération ne peut pas charger https://davidwalsh.name/demo/arsenal.json . Aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée. L' accès d' origine ' http: // localhost ' n'est donc pas autorisé. Si une réponse opaque répond à vos besoins, définissez le mode de la requête sur «no-cors» pour récupérer la ressource avec CORS désactivé.

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

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

Cependant, cela nécessite toujours que le serveur active également CORS et autorise votre domaine à demander la ressource.

Consultez la documentation CORS et cette superbe vidéo Udacity expliquant la même politique d'origine .

Vous pouvez également utiliser le mode sans cors côté client, mais cela ne vous donnera qu'une réponse opaque (vous ne pouvez pas lire le corps, mais la réponse peut toujours être mise en cache par un service worker 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)  
});

J'avais mon code frontal en cours d'exécution dans http: // localhost: 3000 et mon API (code backend) fonctionnant à http: // localhost: 5000

Utilisait Fetch API pour appeler l'API. Au départ, il lançait une erreur "cors". Ensuite, j'ai ajouté ce code ci-dessous dans mon code API Backend, permettant l'origine 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 vos origines dans le cas d'autres environnements tels que stage, prod.

Cela a fonctionné pour moi:

npm install -g local-cors-proxy

Point de terminaison d'API que nous voulons demander et qui présente des problèmes CORS:

https://www.yourdomain.com/test/list

Démarrez le proxy:

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

Puis dans votre code client, nouveau point de terminaison d'API:

http://localhost:8010/proxy/test/list

Le résultat final sera une demande à https://www.yourdomain.ie/test/list sans les problèmes CORS!

Je sais qu'il s'agit d'un article plus ancien, mais j'ai trouvé que ce qui fonctionnait pour moi pour corriger cette erreur était d'utiliser l'adresse IP de mon serveur au lieu d'utiliser le nom de domaine dans ma demande de récupération. 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)
});

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

Regardez https://expressjs.com/en/resources/middleware/cors.html Vous devez utiliser cors.

Installer:

$ npm install cors

const cors = require('cors');
app.use(cors());

Vous devez mettre ce code dans votre serveur de nœuds.