web-dev-qa-db-fra.com

Demande GET avec Basic Auth fonctionnant depuis Postman mais pas depuis le navigateur

Je travaille avec une API odata, et lorsque j'utilise postman pour faire une demande GET, cela fonctionne parfaitement et j'obtiens la réponse comme je m'y attendais. Postman Request

Mais lorsque j'utilise une demande d'extraction de mon application React, la demande renvoie un 401, en utilisant les mêmes en-têtes que ceux que j'ai utilisés précédemment dans Postman. Et il est dit que Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401.

Une idée sur la façon de résoudre cette demande? Merci!

fetch('https://api4.successfactors.com/odata/v2/', {
  method: 'GET',
  headers: {
    authorization: `Basic ${auth}`, //auth is the encoded base64 username:password
  },
})
  .then(response => response.json())
  .then((response) => {
    console.log('in response: ', response);
  })
  .catch((error) => {
    console.log('in fetchJobs error: ', error);
  });

Ceci est le 401 que je reçois .... enter image description here

javascriptgetrequestodatafetch
5
JC Garcia

Cela est probablement dû au fait que Postman n'envoie probablement pas de demande de contrôle en amont Options avant votre GET et, à la réception de la réponse GET, n'effectue aucun type de vérification des cors ( car cela n'aurait pas vraiment de sens de toute façon).

D'un autre côté, lors de l'exécution de code à partir de votre page Web Chrome exécute à la fois un contrôle en amont Options afin de déterminer quels paramètres de demande interdomaine il est autorisé à envoyer au serveur distant et vérifier si la réponse à la demande Options a le Access-Control-Allow-Origin en-tête pour autoriser votre Origin (c'est-à-dire le domaine de la page à partir de laquelle vous faites la demande).

Généralement, un contrôle en amont Options est envoyé au serveur par un navigateur pour demander au serveur s'il est autorisé à effectuer l'opération qu'il est sur le point d'effectuer - dans votre cas, un GET. Si le serveur distant (interdomaine) ne répond pas à la demande de prélecture Options avec les en-têtes corrects dans la réponse autorisant votre GET, le navigateur n'en enverra pas. Cependant, vous n'allez pas aussi loin, car la réponse à votre demande Options ne passe même pas elle-même un contrôle cors Origin.

Si vous contrôlez le serveur, vous devez répondre à la demande Options en définissant Access-Control-Allow-Origin en-tête sur la réponse pour inclure le Origin de votre page de demande, et également pour définir le Access-Control-Allow-Methods pour inclure GET (et probablement OPTIONS). Si vous ne contrôlez pas le serveur distant, il est probable que tout service api normal tel que celui que vous essayez de frapper ait une configuration dans son backend que vous pouvez définir quelque part pour autoriser votre Origin.

Vous pouvez en savoir plus sur le comportement des cors ici

5
Rhys

Le moyen idéal consiste à autoriser sur votre serveur à autoriser les appels de différents domaines, mais si vous n'avez pas accès aux services principaux et de test, vous pouvez installer ce plugin chrome pour contourner le pré -demandes de vol. cors chrome

0
RohitAneja

Vous rencontrez un problème CORS, afin de le surmonter, vous devez activer CORS sur votre backend.

0
Mike Tung