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

王林
Freigeben: 2024-02-06 08:39:08
nach vorne
537 Leute haben es durchsucht

使用 Golang 从 Reactjs 应用程序接收 Axios 发布数据时出现问题

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);
            });
        }
    };
Nach dem Login kopieren

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)
}
Nach dem Login kopieren

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"`
}
Nach dem Login kopieren

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")
Nach dem Login kopieren

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)
Nach dem Login kopieren

Konflikte mit:

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

Titel sollte ersetzt werden durch:

w.header().set("context-type", "application/json")
Nach dem Login kopieren

2. CORS-Einstellung ist falsch

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

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

    w.header().set("access-control-allow-headers", "content-type")
Nach dem Login kopieren

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")
Nach dem Login kopieren

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!

Quelle:stackoverflow.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage