web-dev-qa-db-fra.com

L'en-tête CORS 'Access-Control-Allow-Origin' est manquant.

J'essaie d'utiliser l'API ( docs ) de webUntis pour un projet scolaire. Pour l'instant, j'essaie simplement d'établir n'importe quel type de connexion à l'API.

var result;
const url = 'https://api.webuntis.dk/api/status';
var xhr = new XMLHttpRequest();

xhr.open('GET',url, true);
xhr.setRequestHeader('Access-Control-Allow-Origin','*');
xhr.setRequestHeader('Content-type','application/json');
xhr.setRequestHeader('Access-Control-Allow-Methods','GET');
xhr.setRequestHeader('X-API-KEY', '/*API KEY*/');
xhr.send();


xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        result = xhr.responseType;
        console.log(result);
    }
};

Ce code produit le message d'erreur suivant:

Demande d'origine croisée bloquée: la même stratégie d'origine interdit le lecture de la ressource externe à https://api.webuntis.dk/api/status (Raison: l'en-tête CORS 'Access-Control-Allow-Origin' est manquant).

Comment ce problème peut-il être résolu? Peut-être que ma clé API est incorrecte?

Disclaimer: Le message d'erreur a été traduit de l'allemand.

javascripthttpcors
4
human being

Cela signifie fondamentalement que cette API n'est pas configurée pour être appelée à partir d'une autre page Web. Cross-Origin désigne l’émission d’une requête HTTP d’un domaine (Origin) à un autre. Cette API est destinée à être utilisée à partir d'une application serveur. Si vous devez l'appeler à partir d'une page Web, vous devez créer un serveur proxy simple que votre page Web peut appeler, qui en fera la demande à webUntis.

1
Bill

Vous faites une demande sur un autre site, dans ce cas l'API à api.webuntis.dk. Ce type de demande s'appelle une "demande d'origine croisée" 

Pour que de telles requêtes fonctionnent en JavaScript, le serveur de leur côté doit les autoriser .

Pour ce faire, leur serveur envoie des en-têtes CORS spéciaux, le plus élémentaire étant l'en-tête "Access-Control-Allow-Origin".

J'imagine que le fournisseur d'API n'a pas prévu ou prévu que cette API soit utilisée à partir d'une interface frontale (par exemple, JavaScript dans le navigateur), vous devez donc contourner ce problème.

Une solution consiste à configurer votre propre serveur et à demander au code JavaScript d'envoyer une requête à votre serveur, puis à votre serveur, puis à l'API, car le code côté serveur n'est pas lié aux en-têtes CORS.

Alternativement, pour essayer des choses, vous pouvez préfixer l'URL avec https://cors.io comme ceci: 

const url = 'https://cors.io/?https://api.webuntis.dk/api/status';
7
geekonaut

Qu'est-ce que la CORS?

de MDN :

Le partage de ressources d'origine croisée (CORS) est un mécanisme qui utilise en-têtes HTTP supplémentaires permettant à un agent d'utilisateur d'obtenir l'autorisation d'accéder à ressources sélectionnées sur un serveur dont l'origine (domaine) est différente de celle de le site actuellement utilisé. Un agent d'utilisateur crée un HTTP d'origine croisée request quand il demande une ressource d'un domaine, protocole, différent. ou port que celui d'où provient le document actuel.

SOLUTION

Vous devez définir l’autorisation CORS sur votre serveur. (https://api.webuntis.dk/api/status)

Exemple de réglage:

  1. PHP 

    <?php header("Access-Control-Allow-Origin: *"); 

  2. Des rails

    #in config/application.rb config.action_dispatch.default_headers = { 'Access-Control-Allow-Origin' => '*', 'Access-Control-Request-Method' => %w{GET POST OPTIONS}.join(",") }

remarque: remplacez * par l'URL spécifique pour laquelle vous souhaitez autoriser CORS. '*' est fortement déconseillé, à moins que vous ne fournissiez une API publique destinée à être consultée par tout consommateur.

1
Adrian Rotama

L'envoi d'Access-Control-Allow-Origin au serveur ne résout rien. Le serveur doit envoyer Access-Control-Allow-Origin défini sur * à votre navigateur pour autoriser l'exécution des demandes ajax.

0
Paun Narcis Iulian