Fetch post avec les données du corps ne fonctionne pas params vide

Je suis en train de réécrire mon appel ajax pour récupérer:

Ajax:

  $.post({
    context: this,
    url: "/api/v1/users",
    data: { 
      user: 
        {
          email: email,
          password: password
        } 
    }
  }).done((user) => {
  }).fail((error) => {
  })

Fetch:

  fetch('/api/v1/users', {  
  method: 'POST',
  headers: {
    "Content-Type": "application/json"
  },      
    body: { 
    "user" : 
      {
        "email" : email,
        "password" : password
      } 
  }
  })
  .then(res => {  
    if (res.status !== 200) { {
        console.log("error")
      })          
    } else {
      res.json().then(data => {
        console.log(data)
      })
    }
  })

J'obtiens une erreur vide params ~ mauvais demande à partir de mon serveur.

J'ai aussi trouvé cette façon de faire, mais dans ce code ci-dessous j'obtiens une erreur: Unexpected token.

  var payload = { 
    "user" : 
      {
        "email" : email,
        "password" : password
      } 
  };

  var data = new FormData();
  data.append( "json", JSON.stringify( payload ) );

  fetch('/api/v1/users', {  
  method: 'POST',
  headers: {
    "Content-Type": "application/json"
  },      
    body: data
  })

Comment puis-je réécrire la requête ajax pour récupérer?

InformationsquelleAutor Dudis | 2016-10-03
  1. 12

    Suivi de ce sujet sur github: https://github.com/matthew-andrews/isomorphic-fetch/issues/34

    La solution à ma question est d'utiliser le JSON.stringify de la fonction et de définir le Type de Contenu d'en-tête d'application/json. Pas assez sûr de savoir pourquoi la deuxième tentative dans ma question n'a pas de travail même si.

    fetch('/api/v1/users', {  
    method: 'post',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({ "user": {
      "email" : email,
      "password" : password
    }}),
})

    Officiel MDN Documentation:

    var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');

fetch('/contact-form', {
    method: 'POST',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default',
    body: JSON.stringify(fields)
}).then(() => {
    dispatch(contactFormSubmitSuccess());
});
    • le corps de la clé ne fonctionne pas pour moi.
    • (il échoue dans chrome, au lieu de cela, je vais faire coder les paramètres de l'url)
    • Ajouter des en-têtes comme Dudis suggéré fonctionné pour moi, merci!
    InformationsquelleAutor Dudis
  2. 2

    Vous devriez essayer ceci:

    fetch('/api/v1/users', {
    method: 'post',
    body: JSON.stringify({"user":{
        "email": email,
        "password": password
    }}),
});

    chercher de l'API

    • Merci, c'est essentiellement le même comme mon deuxième exemple dans ma question. C'est toujours en me montrant params manquant bien que l'ajax version fonctionne très bien.
    InformationsquelleAutor gamboa
  3. 1

    travaillé de cette façon lors de l'envoi de body comme json échoué.

            var formData = new FormData();
        formData.append('key1', 'value1');
        formData.append('key1', 'value2');

        fetch('url', {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data'
            },
            body: formData
        }`)`

    EDIT: Dans mon cas, le serveur n'a identifié le contenu par l'intermédiaire du formulaire de soumission de données. Le code n'a pas été écrit pour lire le corps de la requête json. Il est donc possible d'avoir un problème avec votre code côté serveur en tant que bien.

    InformationsquelleAutor buddhiv
  4. 0

    en-têtes: {"Content-Type": "application/json'} - déjà répondu

    • ouais, ne peux pas souligner l'en-tête assez. J'ai passé beaucoup trop de temps confus, lorsque la question était de me faute d'orthographe application dans l'en-tête. La première étape consiste à vérifier les fautes de frappe.
    InformationsquelleAutor Smith