Probleme beim Empfang von Axios-Postdaten aus der Reactjs-Anwendung mit Golang

Frageninhalt

Ich habe eine lokal gehostete Webseite mit ReactJS, die Axios-Beiträge an Port 9000 sendet. Ich habe einen Golang-Server, der den Port abhört und die Post empfängt. Anschließend wird der Beitrag dekodiert, es werden jedoch keine Daten abgerufen. Unten finden Sie den Codeteil zum Senden von Axios-Beiträgen in der ReactJS-Anwendung.

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);
            });
        }
    };

Das Folgende ist der Teil des Golang-Servers, der Beiträge verarbeitet.

// 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)
}

Das Folgende ist die Listitem-Struktur

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

Ich habe versucht, es in „Titel“ statt in „Aufgabe“ umzubenennen und nur statische Variablen zu übergeben, aber ohne Erfolg.

In der Konsole wird der eingegebene Text korrekt gedruckt, aber wenn die Konsole die Axios-Antwort vom Golang-Server ausgibt, enthält ihre Antwort nie den Aufgabennamen.

Dies ist ein Beispiel für den Antwortdatenteil vom Golang-Server: data: {_id: '000000000000000000000000', title:'test'}.

Es wird nur dieses ausgegeben data: {_id: '000000000000000000000000'}

Nach Erhalt der Post lautet die Ausgabe des Golang-Terminals wie folgt:

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

Aufgabeneigenschaften scheinen im neuen zu funktionieren. Mein Problem ist, dass die neuen Aufgaben nicht den von der Webseite eingegebenen Text enthalten. Wenn Sie mehr Code benötigen, sehen Sie sich bitte den Code unten an

• Haupt-Repository
• reactjs-Dateien
• Gehe zur Stammdatei

Richtige Antwort

Es wird empfohlen, Devtools zu verwenden, um solche Probleme zu beheben.

Screenshot zeigt, dass die Nutzlast per Formular-URL codiert ist. Aber der Server versucht, es mit dem JSON-Decoder zu lesen (_ = json.newdecoder(r.body).decode(&newtask)）。如果您不忽略 decode 的错误，它应该报告内容不是有效的 json。要解决此问题，只需从 client/src/to-do-list.js 中删除 {headers: {"content-type": "application/x-www-form-urlencoded"}} Das ist es.

Nach der Änderung beträgt die Nutzlast:

Andere Fehler:

1. context-typeHeader stimmt nicht mit Inhalt der Antwort überein

go-server/main.go 中的 func createtask Es gibt noch eine andere Frage. Die Antwort ist als json:

codiert

json.newencoder(w).encode(newtask)

Konflikte mit:

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

Titel sollte ersetzt werden durch:

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

2. CORS-Einstellung ist falsch

    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")

Folgende Zeile kann auf createtask 不处理 optionsAnfrage entfernt werden:

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

Das obige ist der detaillierte Inhalt vonProbleme beim Empfang von Axios-Postdaten aus der Reactjs-Anwendung mit Golang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!