Discussion :

[Manuel26]

Bonjour,
je veux envoyer à une API les données d'un formulaire avec le constructeur formData(). dans ce formulaire je récupère un fichier image pnj et deux input texte.
Je crée un objet formData que je place dans un addEventListener dans lequel se trouve également mon appel API POST. Je récupère mon token également dans le addEventListener que je récupère correctement car il apparaît dans ma console au click submit, l'API demande un token pour envoyer un POST, je récupère mon token dans mon session storage.
Je me retrouve avec une erreur 500 "internal server error" dans ma console, je pense que c'est lié au format des données envoyées mais sans certitude.

Si une personne peut m'aider a résoudre ce problème ?

je vous partage mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const formEl = document.getElementById('pictureForm');
 
formEl.addEventListener('submit', function (e) {
    e.preventDefault();      
 
    const formData = new FormData(formEl);
 
    const token = sessionStorage.getItem("token");
    console.log("token", token)    
 
    fetch('http://localhost:5678/api/works', {
        method: "POST",
        headers: {
            Authorization: "Bearer " + token
        },
        body: formData
    })
        .then(res => res.json())
        .then(data => console.log(data))
        .catch(error => console.log(error));      
});

[mathieu]

s'il y avait un souci avec votre requête, le serveur renverrait un code commençant par 4 :
https://fr.wikipedia.org/wiki/Liste_...du_client_HTTP

le code 500 indique un souci du coté du serveur. ça peut venir du code serveur, du programme serveur http, etc.

[Manuel26]

Merci Mathieu,

Je viens de modifier mon code car effectivement les données transmises dans mon formData étaient insuffisantes, le fichier image n'était pas envoyé et le serveur attend un Object contenant 3 éléments. Une fois mon code modifié je me retrouve avec une nouvelle erreur "400 Bad request" ce qui correspond à une faute de syntaxe à priori. Mais je ne cerne pas ou elle se trouve car mon token est bien récupéré et l'url de l'API est correct aussi. Si j'enlève l'espace du "Bearer" j'ai une erreur 401 unauthorized, il me semble qu'il faut laisser cet espace.
Voici mon nouveau code, si une personne repère l'anomalie je suis preneur : )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const formEl = document.getElementById('pictureForm');
 
formEl.addEventListener('submit', function (e) {
    e.preventDefault();    
 
    const formData = new FormData(formEl);       
 
    const token = sessionStorage.getItem("token");      
 
    fetch('http://localhost:5678/api/works', {
        method: "POST",
        headers: {
            Authorization: "Bearer " + token            
        },
        body: formData
        })        
        .then(function (response){
            if (response.ok){
                closeModal2();
                alert('Données envoyées');
 
                return response.json();
            } else {
                throw new Error ('Réponse négative du serveur');
            }
        })
        .then(function () {
            dataTable.push(data);
            displayWorks(dataTable);
            modalWorks(dataTable);
        })
        .catch(error => console.log(error));      
});