首頁 > 後端開發 > Golang > 使用 Golang 從 Reactjs 應用程式接收 Axios 發布資料時出現問題

使用 Golang 從 Reactjs 應用程式接收 Axios 發布資料時出現問題

王林
發布: 2024-02-06 08:39:08
轉載
565 人瀏覽過

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

問題內容

我有一個使用reactjs的本地託管網頁,它將axios帖子發送到連接埠9000。我有一個golang伺服器監聽該連接埠並接收該帖子。然後它對帖子進行解碼,但永遠不會獲取任何數據。下面是在reactjs應用程式中發送axios post的程式碼部分。

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);
            });
        }
    };
登入後複製

下面是 golang 伺服器處理貼文的部分。

// 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)
}
登入後複製

下面是 listitem 結構

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

我嘗試將其重命名為標題而不是任務,並且僅傳遞靜態變數但無濟於事。

在控制台中它正確地列印了輸入的文本,但是當控制台從 golang 伺服器輸出 axios 回應時,其回應從不包含任務名稱。

這是來自 golang 伺服器的回應資料部分的範例:data: {_id: '000000000000000000000000', title:'test'}.

它只會輸出這個 data: {_id: '000000000000000000000000'}

#收到貼文後golang終端輸出如下:

{ObjectID("000000000000000000000000")  false}
Inserted a Single Record  ObjectID("63decde2a336b8e7cdc2b865")
登入後複製

任務屬性似乎在新的 .我的問題是新任務沒有從網頁輸入的文字。如果您需要更多程式碼,請參閱下面的程式碼

  • 主儲存庫
  • reactjs 檔案
  • go 主檔案


正確答案


建議建議使用devtools來偵錯這類問題。

螢幕截圖顯示有效負載是表單 url 編碼的。但伺服器嘗試使用 json 解碼器讀取它(_ = json.newdecoder(r.body).decode(&newtask))。如果您不忽略 decode 的錯誤,它應該會報告內容不是有效的 json。要解決此問題,只需從client/src/to-do-list.js 中刪除{headers: {"content-type": "application/x-www-form-urlencoded "}} 即可。

更改後,有效負載將為:

其他錯誤:

1。 context-type 標頭與回應中的內容不符

#go-server/main.go 中的 func createtask 也有另一個問題。回應被編碼為 json:

json.newencoder(w).encode(newtask)
登入後複製

與以下內容衝突:

    w.header().set("context-type", "application/x-www-form-urlencoded")
登入後複製

標題應替換為:

w.header().set("context-type", "application/json")
登入後複製

2. cors 設定不正確

    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")
登入後複製

由於 createtask 不處理 options 要求,因此可以刪除以下行:

    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "POST")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
登入後複製

以上是使用 Golang 從 Reactjs 應用程式接收 Axios 發布資料時出現問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:stackoverflow.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板