web-dev-qa-db-fra.com

Envoyer une charge "brute" à Axios

Comment puis-je envoyer un corps brut de demande/charge à Axios?

Le point final que j'essaie d'appeler s'attend à ce que le corps de la demande soit simplement une chaîne qu'il va récupérer et utiliser.

Si j'essaie simplement de passer une chaîne à axios.post() pour la requestBody, elle sera convertie en un objet sans valeur ({ "this+is+my+message": "" }) et finira par être analysée comme ceci "this+is+my+message=".

J'ai vérifié la documentation, mais n'ai trouvé aucune option qui semblait fonctionner. transformRequest semblait être le plus évident, mais il a envoyé la chaîne et j'ai envoyé la chaîne (littéralement d => d), mais elle semblait toujours la convertir en un objet JSON sans valeur.

javascriptaxios
5
samanime

Il se trouve que si je règle l'en-tête Content-Type sur text/plain, il ne le convertira pas en JSON ou en données de formulaire et l'enverra comme je le souhaite.

axios.post('/my-url', 'my message text', {
  headers: { 'Content-Type': 'text/plain' }
});
7
samanime

Comme je suis tombé ici avec un problème similaire, je voudrais fournir une réponse supplémentaire. Je charge un fichier image (à partir d'un élément <input type="file>) et l'envoie au serveur à l'aide d'axios - mais en tant que corps brut, par opposition à un enveloppement dans une requête multipart/form-data.

Il semble que dans le cas des données brutes, axios fonctionne mieux si les données sont fournies dans une variable ArrayBuffer. Ceci peut être réalisé par exemple en utilisant le fragment de code suivant (ES6):

  const myFile = getMyFileFrom Somewhere()
  const reader = new FileReader()
  reader.onload = () => {
    const result = reader.result
    const headers = {
      'Content-Type': file.type,
      'Content-Disposition': 'attachment; filename="' + file.name + '"'
    }
    axios.post('/upload', result, { headers: headers })
  }

(L'utilisation de l'en-tête Content-Type de cette manière est légèrement non standard, mais dans mon cas, elle n'est utilisée que pour transporter le nom de fichier d'origine)

Voir:

https://github.com/axios/axios#request-config - description de datahttps://developer.mozilla.org/en-US/docs/Web/API/FileReader/ readAsArrayBuffer

2
Remigius Stalder