recuperare post con i dati del modulo a più parti

Question

sto recupero un URL simile a questo:

fetch(url, { 
    mode: 'no-cors', 
    method: method || null, 
    headers: { 
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*', 
    'Content-Type': 'multipart/form-data' 
    }, 
    body: JSON.stringify(data) || null, 
}).then(function(response) { 
    console.log(response.status) 
    console.log("response"); 
    console.log(response) 
}) 

mio API si aspetta che i dati siano di multipart/form-data così io sto usando content-type di questo tipo ... Ma è darmi un risposta con codice di stato 400.

Cosa c'è di sbagliato nel mio codice?

Answer 1

Si sta impostando il Content-Type per essere multipart/form-data, ma quindi utilizzando JSON.stringify sui dati del corpo, che restituisce application/json. Hai una mancata corrispondenza del tipo di contenuto.

È necessario codificare i dati come multipart/form-data anziché json. Solitamente multipart/form-data viene utilizzato durante il caricamento di file ed è un po 'più complicato di application/x-www-form-urlencoded (che è l'impostazione predefinita per i moduli HTML).

Le specifiche per multipart/form-data sono disponibili in RFC 1867.

Per una guida su come inviare questo tipo di dati tramite javascript, vedere here.

L'idea di base è quella di utilizzare l'oggetto FormData (non supportato in IE < 10):

function sendData(url, data) { 
    var formData = new FormData(); 

    for(var name in data) { 
    formData.append(name, data[name]); 
    } 

    fetch(url, { 
    method: 'POST', 
    body: formData 
    }).then(function (response) { 
    ... 
    }); 
} 

Answer 2

Recentemente stavo lavorando con IPFS e ha lavorato questo fuori. Un esempio di ricciolo per IPFS per caricare un file è simile al seguente:

curl -i -H "Content-Type: multipart/form-data; boundary=CUSTOM" -d $'--CUSTOM\r\nContent-Type: multipart/octet-stream\r\nContent-Disposition: file; filename="test"\r\n\r\nHello World!\n--CUSTOM--' "http://localhost:5001/api/v0/add" 

L'idea di base è che ogni parte (raggruppati per archi in boundary con --) ha le sue intestazioni (Content-Type nella seconda parte, per esempio.) L'oggetto FormData gestisce tutto questo per te, quindi è un modo migliore per raggiungere i nostri obiettivi.

Questo si traduce a prendere API simili:

const formData = new FormData() 
formData.append('blob', new Blob(['Hello World!\n']), 'test') 

fetch('http://localhost:5001/api/v0/add', { 
    method: 'POST', 
    body: formData 
}) 
.then(r => r.json()) 
.then(data => { 
    console.log(data) 
})