web-dev-qa-db-fra.com

Faire fonctionner l'API fetch avec CORS après la réponse OPTIONS

J'essaie de récupérer des données de notre API. L'API a activé la prise en charge de CORS et renvoie la réponse ci-dessous à la demande OPTIONS:

Access-Control-Request-Headers:content-type  
Access-Control-Allow-Origin:*

L'API ne permet pas 'Content-type' autre chose que 'application/json'.

En utilisant cette limitation, j'essaie d'utiliser la méthode fetch de React-Native pour obtenir les données.

Méthode 1 (sans cors):

{
    method: 'POST',
    mode: "no-cors",
    headers: {
       'content-type': 'application/json'
}

Avec cette méthode, le navigateur envoie automatiquement le type de contenu comme 'text/plain'. Je suppose que c'est parce que CORS n'autorise qu'un seul des trois en-têtes par défaut. Cependant, puisque le serveur ne prend pas en charge ce type de contenu, il renvoie une erreur pour le type de contenu non pris en charge.

Méthode 2 (avec cors ou avec rien):

{ 
    method: 'POST',
    mode: "cors", // or without this line
    redirect: 'follow',
    headers: {
        'content-type': 'application/json'
    }
}   
...   
.then(response => console.log(response))

Dans ce scénario, en utilisant l'outil réseau F12 de Chrome, je peux voir le serveur renvoyer des données: la première demande au serveur est un fetch pour OPTIONS. Pour cela, le serveur répond en retour avec un objet vide avec l'ensemble d'en-têtes ci-dessus. L'appel suivant est l'appel réel POST API, auquel le serveur répond avec une réponse JSON appropriée contenant des données. Cependant, la réponse qui arrive sur la console via mon code est {}. Je suppose que c'est parce que l'API fetch de react renvoie la réponse de l'appel OPTIONS au lieu de l'appel réel POST.

Existe-t-il un moyen d'ignorer la réponse de la demande OPTIONS et d'obtenir la méthode then pour traiter la réponse de la demande suivante?

javascriptreactjsreact-nativecorsfetch-api
9
letsc

Le problème immédiat que vous rencontrez est que votre code tel qu'il est actuellement écrit s'attend à ce que la réponse soit JSON, mais la réponse est en fait une promesse que vous devez gérer pour obtenir le JSON.

Vous devez donc plutôt faire quelque chose comme ceci:

fetch("https://example.com")
    .then(response => response.json())
    .then(jsondata => console.log(jsondata))
17
sideshowbarker