Problèmes de réception des données de publication Axios à partir de l'application Reactjs à l'aide de Golang

Contenu de la question

J'ai une page Web hébergée localement utilisant Reactjs qui envoie les publications axios au port 9000. J'ai un serveur Golang qui écoute le port et reçoit le message. Il décode ensuite le message mais n'obtient jamais de données. Vous trouverez ci-dessous la partie du code pour envoyer la publication axios dans l'application Reactjs.

onsubmit = (event) => {
        event.preventdefault();
        let { task } = this.state;
        console.log("printing new task title:", task);
        if (task) {
            axios
            .post(
                endpoint + "/api/task",
                {task},
                {headers: {"content-type": "application/x-www-form-urlencoded"}}
            )
            .then((res) => {
                this.gettasks();
                this.setstate({task: ""});
                console.log(res);
            });
        }
    };

Ce qui suit est la partie du serveur Golang qui traite les publications.

// createtask create task route
func createtask(w http.responsewriter, r *http.request) {
    w.header().set("context-type", "application/x-www-form-urlencoded")
    w.header().set("access-control-allow-origin", "*")
    w.header().set("access-control-allow-methods", "post")
    w.header().set("access-control-allow-headers", "content-type")
    var newtask listitem
    _ = json.newdecoder(r.body).decode(&newtask)
    fmt.println(newtask)
    insertonetask(newtask)
    json.newencoder(w).encode(newtask)
}

Voici la structure des éléments de liste

type listitem struct {
id        primitive.objectid `json:"_id,omitempty" bson:"_id,omitempty"`
title     string             `json:"title,omitempty"`
completed bool               `json:"completed,omitempty"`
}

J'ai essayé de le renommer en titre au lieu de tâche et en passant simplement des variables statiques, mais en vain.

Dans la console, il imprime correctement le texte saisi, mais lorsque la console génère la réponse axios du serveur golang, sa réponse ne contient jamais le nom de la tâche.

Voici un exemple de la partie données de réponse du serveur golang : data: {_id: '000000000000000000000000', title:'test'}.

Il ne produit que ceci data: {_id: '000000000000000000000000'}

Après réception du message, la sortie du terminal golang est la suivante :

{ObjectID("000000000000000000000000")  false}
Inserted a Single Record  ObjectID("63decde2a336b8e7cdc2b865")

Les propriétés des tâches semblent fonctionner dans le nouveau. Mon problème est que les nouvelles tâches n'ont pas le texte saisi à partir de la page Web. Si vous avez besoin de plus de code, veuillez consulter le code ci-dessous

• Référentiel principal
• fichiers Reactjs
• aller au fichier maître

Bonne réponse

Il est recommandé d'utiliser des outils de développement pour déboguer de tels problèmes.

La capture d'écran montre que la charge utile est codée en URL de formulaire. Mais le serveur essaie de le lire à l'aide du décodeur json (_ = json.newdecoder(r.body).decode(&newtask)）。如果您不忽略 decode 的错误，它应该报告内容不是有效的 json。要解决此问题，只需从 client/src/to-do-list.js 中删除 {headers: {"content-type": "application/x-www-form-urlencoded"}} C'est tout.

Après le changement, la charge utile sera :

Autres erreurs :

1. context-type L'en-tête ne correspond pas au contenu de la réponse

go-server/main.go 中的 func createtask Il y a aussi une autre question. La réponse est codée en json :

json.newencoder(w).encode(newtask)

Conflits avec :

    w.header().set("context-type", "application/x-www-form-urlencoded")

Le titre doit être remplacé par :

w.header().set("context-type", "application/json")

2. Le réglage des cors est incorrect

    r.handlefunc("/api/task", getalltasks).methods("get", "options")
    r.handlefunc("/api/task", createtask).methods("post", "options")

options 请求将由 getalltask​​s 处理。为了允许 post 请求中的 content-type 标头，应将以下行添加到 getalltask​​s：

    w.header().set("access-control-allow-headers", "content-type")

La ligne suivante peut être supprimée suite à createtask 不处理 optionsdemande :

    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "POST")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

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!