Isu menerima data siaran Axios daripada aplikasi Reactjs menggunakan Golang

Saya mempunyai halaman web yang dihoskan secara tempatan menggunakan reactjs yang menghantar siaran axios ke port 9000. Saya mempunyai pelayan golang mendengar port dan menerima jawatan. Ia kemudian menyahkod siaran tetapi tidak pernah mendapat sebarang data. Di bawah ialah bahagian kod untuk menghantar pos axios dalam aplikasi 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);
            });
        }
    };

Berikut adalah bahagian pelayan golang yang memproses siaran.

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

Berikut ialah struktur listitem

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

Saya cuba menamakannya kepada tajuk dan bukannya tugas dan hanya menghantar pembolehubah statik tetapi tidak berjaya.

Dalam konsol ia mencetak teks yang dimasukkan dengan betul, tetapi apabila konsol mengeluarkan respons axios daripada pelayan golang, responsnya tidak pernah mengandungi nama tugas.

Ini adalah contoh bahagian data tindak balas daripada pelayan golang: data: {_id: '000000000000000000000000', title:'test'}.

Ia hanya mengeluarkan ini data: {_id: '000000000000000000000000'}

Selepas menerima pos, keluaran terminal golang adalah seperti berikut:

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

Sifat tugas nampaknya berfungsi dalam .Masalah saya ialah tugas baharu tidak mempunyai teks yang dimasukkan daripada halaman web. Jika anda memerlukan lebih banyak kod, sila lihat kod di bawah

• Repositori Utama
• reactjs fail
• pergi fail induk

Jawapan betul

Adalah disyorkan untuk menggunakan devtools untuk nyahpepijat isu tersebut.

Tangkapan skrin menunjukkan muatan adalah dikodkan url borang. Tetapi pelayan cuba membacanya menggunakan penyahkod json (_ = json.newdecoder(r.body).decode(&newtask)）。如果您不忽略 decode 的错误，它应该报告内容不是有效的 json。要解决此问题，只需从 client/src/to-do-list.js 中删除 {headers: {"content-type": "application/x-www-form-urlencoded"}} Itu sahaja.

Selepas pertukaran, muatan akan menjadi:

Ralat lain:

1. context-type Pengepala tidak sepadan dengan kandungan dalam respons

go-server/main.go 中的 func createtask Ada soalan lain juga. Respons dikodkan sebagai json:

json.newencoder(w).encode(newtask)

Bercanggah dengan:

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

Tajuk hendaklah diganti dengan:

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

2. tetapan cors tidak betul

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

Barisan berikut boleh dibuang kerana createtask 不处理 options permintaan:

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

Atas ialah kandungan terperinci Isu menerima data siaran Axios daripada aplikasi Reactjs menggunakan Golang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!