Comment POST avec en-tête multipart/form-data et FormData en utilisant fetch

Question

Ceci est un exemple CURL qui fonctionne très bien:

curl -X POST \ 
    <url> \ 
    -H 'authorization: Bearer <token>' \ 
    -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \ 
    -F file=@algorithm.jpg \ 
    -F userId=<userId> 

Je suis en train de reproduire cette demande à l'aide isomorphic-fetch.

J'ai essayé le code suivant:

const formData = new FormData(); 
formData.append('file', file); 
formData.append('userId', userId); 

return fetch(`<url>`, {  
    method: 'POST', 
    headers: { 
    'Content-Length': file.length 
    'Authorization: Bearer <authorization token>', 
    'Content-Type': 'multipart/form-data' 
    }, 
    body: formData 
})` 

J'utilise fs.readFileSync pour générer le file passé à FormData.

L'exemple précédent renvoie un code d'état 401 HTTP (non autorisé) avec un message d'erreur indiquant que le userId embarqué dans le jeton (envoyé par la tête) ne correspond pas au userId passé de formData.

Donc, ma suspicion est que le FormData qui arrive à l'API REST n'est pas formé de manière adéquate.

Le problème peut être lié avec l'en-tête Content-Length, mais je ne trouve pas une meilleure façon de le calculer (si je ne me l'en-tête Content-Length je reçois un en-tête de code d'état HTTP 411Content-Length manquant).

Le cas échéant, cela est dû à une valeur incorrecte dans l'en-tête Content-Length? Toutes les autres suggestions pour expliquer pourquoi cela échoue ou comment mieux le déboguer?

Si d'autres informations sont nécessaires pour clarifier ce problème, veuillez le demander.

MISE À JOUR

J'ai essayé le module form-data afin d'obtenir la bonne valeur Content-Length en utilisant la méthode formData.getLengthSync()

Cependant, le problème reste le même (401 erreur réponse de code d'état HTTP).

Answer 1

Si vous ouvrez votre inspecteur réseau, exécutez cet extrait de code, et soumettre le formulaire, vous devriez voir que le Content-Length est correctement réglée:

const foo = document.getElementById('foo') 
 
foo.addEventListener('submit', (e) => { 
 
    e.preventDefault() 
 
    const formData = new FormData(foo) 
 
    formData.append('userId', 123) 
 
    fetch('//example.com', { 
 
    method: 'POST', 
 
    body: formData 
 
    }) 
 
})

<form id="foo"> 
 
    <input id="file" type="file" name="file"/><br><br> 
 
    <button type="submit">Submit</button> 
 
</form>