CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

Problème React.JS & Axios [PUT]

Pseudo supprimé
Pseudo supprimé 21 juin 2021 à 23:13:44

Hello,

j'ai un petit soucis avec une app Spring Boot & React.

Mon controller :


@PutMapping(value = "/notes/{id}")
    public ResponseEntity<Notes> updateNotes(@PathVariable String id, @RequestBody Notes notes) {
        Notes note = notesRepository.findById(id)
                .orElseThrow(() -> new ResourceNotFoundException("Note not found with ID :" + id));
        note.setNote(notes.getNote());
        note.setDateNote(notes.getDateNote());
        note.setPatientId(notes.getPatientId());
        Notes updateNotes = notesRepository.save(note);
        LOGGER.info("Update Notes OK : " + id);
        return ResponseEntity.ok(updateNotes);
    }

Du côté de React j'ai une classe NotesService qui contient cette méthode :


updateNotes(notesId, note) {
        return axios.put(URL_API_NOTES + '/' + notesId, note);
    }

J'ai essayé d'inverser notesId et note, et côté back je vois bien ma note s'update, mais lorsque je recharge la page elle passe en null.

Du côté de mon composant :


updateNote = (event, note) => {
        let updatedNote = {...note, note: event.target.value};
        console.log(note);
        NotesService.updateNotes(updatedNote, note.id).then(response => {
            this.setState({note: updatedNote});
            // this.setState({note: event.target.value});
            this.handleRefresh();
        })
    }

Quand j'essaye de modifier ma note côté front, je me retrouve avec l'erreur :

https://image.noelshack.com/fichiers/2021/25/1/1624309735-errorreact.png

@CrossOrigin est bien présent du côté de mon controller, et mes autres requêtes passent sans soucis.

J'ai essayé de faire comme ça aussi côté axios :


updateNotes (notesId, note) {
        return axios.request({
            url: URL_API_NOTES + '/' + notesId,
            method: "PUT",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*/*',
                'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type',
            },
            data: {
                note: note
            }
        })
    }

Mais j'ai exactement la même erreur.

Une idée de comment s'y prendre ? C'est pas trop mon domaine le front, mais la je suis obligé.

Merci d'avance.

gorz94
gorz94
Niveau 6
22 juin 2021 à 10:28:12

Les headers 'Access-Control-Allow-Origin et '...-Headers' sont bons, mais mets les sur ton serveur, pas sur le client.

Pseudo supprimé
Pseudo supprimé 22 juin 2021 à 11:18:18

Côté controller backend tout est ok, l'annotation @CrossOrigin de Spring est présente, mes autres requêtes fonctionnent.

mynameisflash
mynameisflash
Niveau 12
22 juin 2021 à 18:02:17

Dans l'erreur ça dit que t'envoies un objet à la fin de l'url c'est normal ?
/api/notes/[object]
Au lieu de /api/notes/id
Parfois ça met erreur cors quand y a pas d'URL correspondant

Sous forums
  • Aide à l'achat Mac
  • Internet
  • Macintosh
  • Création de sites web
  • Création de Jeux
  • Linux
  • Programmation
  • Steam Deck
  • Hardware
La vidéo du moment