La méthode Get est convertie en OPTIONS lors de l'activation de l'api fetch dans React js.

Question

J'essaie d'accéder à l'api ci-dessous qui requiert un nom d'utilisateur et un mot de passe d'authentification de base, et la méthode autorisée dans ce cas est seulement "get".

dispatch(requestBegin());
let apiPath = `xxxx/TEST/appservice/api/app/10/10000127201901`;
return fetch(apiPath, {
  method: 'get',
  headers : {
     "contentType":"application/x-www-form-urlencoded",
      "Authorization" : 'Basic '+btoa('xxx:xxx'),
    },
})
  .then((response) => {
    dispatch(getEventsEnds(json));
  })
  .catch((error) => {
    dispatch(getEventsEnds());
  });

L'erreur enregistrée dans la console :

La réponse à la demande de contrôle préalable ne passe pas le contrôle d'accès : Non L'en-tête 'Access-Control-Allow-Origin' n'est pas présent dans la demande. ressource demandée. Origine ' http://localhost:2200 n'est donc pas autorisé accès. La réponse a un code d'état HTTP 405. Si une réponse opaque opaque répond à vos besoins, définissez le mode de la demande sur 'no-cors' pour récupérer la ressource avec CORS désactivé.

OPTIONS http://xxx/appservice/api/app/10/10000127201901 405 (Méthode non autorisée)

Quelqu'un peut-il m'expliquer pourquoi les options sont affichées lorsque j'essaie d'obtenir l'api ?

Answer 1

Cela signifie que votre serveur d'API n'accepte pas les demandes CORS ou les demandes provenant de localhost.

Vérifiez la documentation de votre API, mais je pense que vous ne pourrez pas interagir directement avec elle depuis votre application Web.

Votre meilleure chance est d'utiliser un proxy, vous pouvez en développer un vous-même ou utiliser quelque chose comme node-http-proxy pour proxyer vos appels API. (Il existe des équivalents en php ou en python).

Le serveur proxy sera en mesure d'émettre les demandes et les transmettra ensuite à votre application.

Lecture complémentaire suggérée : tapez comprendre CORS sur google et lisez plus à ce sujet.

Pour le développement local, consultez :

https://github.com/Rob--W/cors-anywhere

Answer 2

Ce problème se produit lorsque l'URL de l'api du client et l'URL du serveur ne correspondent pas, y compris le numéro de port. Dans ce cas, vous devez activer votre service pour CORS, c'est-à-dire le partage des ressources entre les origines.

utiliser npm install cors

se référer à ce [refer][1]