javascript - 将 jQuery.ajax() 替换为 Go REST API 端点的 fetch() - 空负载

Question

我目前有一个 ReactJS Web 应用程序，它可以向 REST API 端点创建 POST 或 PUT 请求。 REST API 是使用 golang 构建的。

当我使用 jQuery 发出 Ajax POST 请求时，一切正常。下面是代码的演示:

// my jquery attempt

let sendUrl = "http://192.168.11.241:8000/user";
let sendType = "POST";

let data = {"userid":1};
const postData = [{name:"data",value:JSON.stringify(data)}];

let result = $.ajax({
  type: "POST",
  dataType: 'json',
  cache: false,
  url: sendUrl,
  data: postData
});

这是我的 REST API 代码的样子

// main.go
package main

import (
  "user"
  "github.com/gorilla/mux"
  "log"
  "net/http"
)

func main() {
    router := mux.NewRouter()
    router.HandleFunc("/payment/{payment_type}", user.Post).Methods("POST","OPTIONS")
     log.Fatal(http.ListenAndServe(":8000", router))
}

// user.go
func Post(w http.ResponseWriter, r *http.Request) {
  w.Header().Set("Access-Control-Allow-Origin", "*")
  w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
  url := mux.Vars(r)
  r.ParseForm()
  qs := r.Form
  fmt.Println(qs)
}

当我运行 JS 和 Go API 代码时，我成功看到 userid 1 内容输出到 bash。

现在我用 fetch 调用替换我的 javascript 代码，如下所示:

let sendUrl = "http://192.168.11.241:8000/user";
let sendType = "POST";

let data = {"userid":1};
const postData = [{name:"data",value:JSON.stringify(data)}];

fetch(sendUrl, {
  method: "POST",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  //body: JSON.stringify(postData)
  body: {"data":JSON.stringify(data)}
});

我的 Go API 确认正在发出 POST 请求，但发布数据为空，并且我没有看到 userid 1。我尝试了不同类型的正文输入，例如带和不带 json.stringify，我尝试了不同的 header 信息，例如 'Content-Type': 'application/x-www-form-urlencoded' 或删除 header 全部放在一起，但使用我的 go api 接收时数据仍然为空。

有人知道我做错了什么吗？

Answer 1

好的，我发现 fetch() 调用的正确设置组合如下:

const sendUrl = "http://192.168.11.241:8000/user";
const sendType = "POST";
const data = {"userid":1};
const postData = "data="+JSON.stringify(data);

fetch(sendUrl, {
  method: sendType,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: postData
});

我必须重新设计 postData 对象的结构，并更改 content-type