使用 VueJS 将 JSON 发布到 localhost Go 后端时出现 EOF答案

【问题标题】：EOF when posting JSON to localhost Go backend using VueJS使用 VueJS 将 JSON 发布到 localhost Go 后端时出现 EOF
【发布时间】：2020-03-08 06:06:41
【问题描述】：

我正在设置一个登录系统，使用 VueJS 作为前端，Go 作为后端。我目前卡在以 JSON 格式将用户名和密码发布到后端。

目前我正在尝试使用 fetch 发布，此前我在 Axios 上运气不佳。

发布方式：

fetch("http://localhost:9444/login", {
                    method: "post",
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },

                    body: JSON.stringify({
                        "emailAddress": "myName",
                        "password": "myPassword"
                    })
                })
                .then( (response) => { 
                console.log(response)
                });

然后我在我的后端路由：

r := mux.NewRouter().StrictSlash(true)
r.HandleFunc("/login", models.LoginHandler(db)).Methods("POST", "OPTIONS")

登录处理程序：

func LoginHandler(db *sql.DB) func(w http.ResponseWriter, req *http.Request) {
    return func(w http.ResponseWriter, req *http.Request) {
        // w.Header().Set("Access-Control-Allow-Origin", "*")
        // w.Header().Set("Access-Control-Allow-Headers", "*")
        w.Header().Set("Content-Type", "application/json; charset=utf-8")
        w.Header().Set("Access-Control-Allow-Origin", "*")

        // Initialize loginInfo
        loginInfo := LoginInfo{}

        // Decode request body using JSON
        err := json.NewDecoder(req.Body).Decode(&loginInfo)
        if err != nil {
            panic(err)
        }

        println(loginInfo.EmailAddress)
        println(loginInfo.Password)

        w.WriteHeader(http.StatusOK)
        w.Write([]byte("Test message."))
    }
}

目前导致解码部分崩溃的原因如下：

2019/11/12 14:45:53 http: panic serving [::1]:57224: EOF
goroutine 35 [running]:
net/http.(*conn).serve.func1(0xc000196000)
        c:/go/src/net/http/server.go:1769 +0x140
panic(0x8be000, 0xc00005c050)
        c:/go/src/runtime/panic.go:522 +0x1c3
_/H_/Development/clientportal/backend/models.LoginHandler.func1(0x9f7360, 0xc0001be000, 0xc0001a8200)
...

什么可能导致持续的 EOF 错误？我已经使用邮递员进行了测试（并确认了正确的功能）：

{
    "emailAddress": "login",
    "password": "passw"
}

正确返回状态 200。

【问题讨论】：

当您检查浏览器控制台时，您是否看到请求正文为空？
您正在为 POST 和 OPTIONS 分配该处理程序，但您没有检查它是什么类型的请求。也许它在 POST 之前发送了一个 OPTIONS？
@mkopriva 使用“网络”选项卡查看请求，只有请求标头和一般信息。
您需要接受 OPTIONS（CORS 才能工作），但它应该只返回 200/204 和 Access-Control-Allow-Origin 标头（您可以返回其他标头，但这是最低要求）。您不能只删除 OPTIONS；您需要适当地处理它（即与 POST 不同）。
这里简要介绍了 CORS 预检的工作原理以及为什么需要处理 OPTIONS：developer.mozilla.org/en-US/docs/Glossary/Preflight_request

标签： json vue.js go

【解决方案1】：

感谢 Adrian 的评论，我通过在后端使用以下代码添加接受 OPTIONS 使其正常工作。

路由：

r.HandleFunc("/login", models.LoginCORSHandler()).Methods("OPTIONS")

处理程序：

// LoginCORSHandler handle OPTIONS request
func LoginCORSHandler() func(w http.ResponseWriter, req *http.Request) {
    return func(w http.ResponseWriter, req *http.Request) {
        w.Header().Set("Access-Control-Allow-Origin", "*")
        w.Header().Set("Access-Control-Allow-Methods", "POST")
        w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
        w.WriteHeader(http.StatusOK)
    }
}

【讨论】：