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
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:
context-type
Header stimmt nicht mit Inhalt der Antwort übereingo-server/main.go
中的 func createtask
Es gibt noch eine andere Frage. Die Antwort ist als json:
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")
r.handlefunc("/api/task", getalltasks).methods("get", "options") r.handlefunc("/api/task", createtask).methods("post", "options")
options
请求将由 getalltasks
处理。为了允许 post 请求中的 content-type
标头,应将以下行添加到 getalltasks
:
w.header().set("access-control-allow-headers", "content-type")
Folgende Zeile kann auf createtask
不处理 options
Anfrage 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!