Comment puis-je transmettre des données à un service dans Axios et m'assurer que le type de contenu et les limites corrects sont définis ?

Transmission des données au service dans Axios

Problème : Vous souhaitez attacher un "_boundary" à l'en-tête de un appel API Axios, mais les données ne sont pas accessibles dans le service Axios.

Solution : Axios gère automatiquement les types de contenu pour certains formats de corps de requête, y compris FormData. Passer une instance FormData comme argument de données définira le type de contenu et la limite MIME appropriés sans configuration manuelle.

Explication détaillée :

Gestion automatique du type de contenu :

Lors de l'envoi d'une instance FormData, le runtime définit automatiquement le Content-Type sur "multipart/form-data" et inclut les jetons de limite MIME corrects. Ce comportement garantit que les données sont correctement sérialisées et envoyées au serveur.

Exemple :

Voici un exemple d'envoi d'une instance FormData avec Axios :

<code class="javascript">const form = new FormData();

// Attach files and other fields to the formData instance
form.append('file', fileInput.files[0]);
form.append('foo', 'foo');

axios.post(url, form);</code>

Gestion des types de contenu personnalisés :

Vous devez uniquement définir manuellement le type de contenu si vous souhaitez envoyer des données de chaîne dans un format spécifique (par exemple, texte/xml, application/json).

Exemple :

<code class="javascript">const data = JSON.stringify({ foo: 'foo', bar: 'bar' });

axios.post(url, data, {
  headers: { 'content-type': 'application/json' },
});</code>

Évitement d'Axios v0.27.1 et v1.0.0 :

Ces versions d'Axios ont des problèmes connus avec la gestion de FormData. Il est recommandé d'utiliser des alternatives telles que l'API Fetch, got (pour Node.js) ou ky (pour les navigateurs).

Considérations sur Node.js :

Quand en utilisant Axios sur le backend Node.js, il ne déduira pas les en-têtes Content-Type des instances FormData. Pour résoudre ce problème, vous pouvez utiliser un intercepteur de requêtes ou fusionner manuellement les en-têtes.

Méthode jQuery $.ajax() :

Par défaut, $.ajax() envoie les charges utiles sous la forme "application/x-www-form-urlencoded" et sérialise les données JavaScript à l'aide de jQuery.param(). Pour permettre au navigateur de définir automatiquement le type de contenu, utilisez les options suivantes :

<code class="javascript">$.ajax({
  url,
  method: 'POST',
  data: body,
  contentType: false, // Let the browser figure out the content type
  processData: false, // Don't attempt to serialize data
});</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!