我有一个使用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")
任务属性似乎在新的 .我的问题是新任务没有从网页输入的文本。如果您需要更多代码,请参阅下面的代码
建议使用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"}}
即可。
更改后,有效负载将为:
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")
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中文网其他相关文章!