Comment transmettre des données de formulaire avec Axios : dois-je définir _boundary manuellement ?

Transmission de données au service Axios

Dans ce scénario, l'objectif est de transmettre les données du formulaire du composant loginService au composant Services/index pour accéder à _boundary dans les en-têtes de l'instance Axios. La clé pour y parvenir réside dans la compréhension de la manière dont les corps de requête sont gérés par les clients HTTP.

Gestion du corps de requête HTTP

Lorsque vous effectuez des requêtes HTTP avec FormData, le client définit automatiquement l'en-tête Content-Type à multipart/form-data et inclut les jetons de limite appropriés. De même, pour URLSearchParams, il définit Content-Type sur application/x-www-form-urlencoded.

Résolution du problème Axios

Dans votre cas, vous souhaitez définissez manuellement _boundary dans l’en-tête. Cependant, puisque nous utilisons déjà FormData, le runtime gérera cela automatiquement. Vous pouvez ignorer cette étape si vous utilisez Axios v0.27.1 ou une version antérieure.

Considérations sur Node.js

Lors de l'utilisation d'Axios dans Node.js, les en-têtes FormData ne seront pas déduits automatiquement. Pour contourner le problème, vous pouvez utiliser un intercepteur de requête :

<code class="javascript">axios.interceptors.request.use(config => {
  if (config.data instanceof FormData) {
    Object.assign(config.headers, config.data.getHeaders());
  }
  return config;
}, null, { synchronous: true });</code>

Vous pouvez également fusionner les en-têtes manuellement lors de la requête.

Considérations sur jQuery

Si vous utilisez $.ajax() de jQuery ou des méthodes pratiques comme $.post(), il est important de définir contentType et processData sur false pour empêcher la sérialisation automatique et préserver le format FormData :

<code class="javascript">$.ajax({
  url,
  method: "POST",
  data: body,
  contentType: false,
  processData: false
})</code>

Évitez les versions 0.27.1 et 1.0.0 d'Axios

Ces versions spécifiques d'Axios présentent des problèmes connus lors de la gestion de FormData. Nous vous recommandons d'utiliser Fetch, got ou ky à la place.

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!