Javascript fetch() 多次 ping 我的 golang 休息端点？

大家好，我们又见面了啊~本文《Javascript fetch() 多次 ping 我的 golang 休息端点？》的内容中将会涉及到等等。如果你正在学习Golang相关知识，欢迎关注我，以后会给大家带来更多Golang相关文章，希望我们能一起进步！下面就开始本文的正式内容~

我有一个我不明白的错误，是我在 golang 上做错了什么，还是在 javascript fetch() 语句上做错了什么。这是一个简单的情况，我想对 golang 端点进行 fetch() 调用并简单地打印 hello world。但由于某种原因，golang 代码触发了两次。这是我的代码：

// main.go

package main

import (

  "route/page"
  "github.com/gorilla/mux"
  "log"
  "net/http"
)

func main() {

    router := mux.newrouter()
    router.handlefunc("/page", page.search).methods("get","options")
    log.fatal(http.listenandserve(":8000", router))

}


//route/page.go

package page
import (
  "net/http"
  "log"
)

func search(w http.responsewriter, r *http.request) {

  w.header().set("access-control-allow-headers", "accept, content-type, content-length, accept-encoding, authorization, organization")
  w.header().set("access-control-allow-origin", "*")
  w.header().set("content-type", "application/json")

  log.println(r.header.get("authorization"))

  log.println("hello world")
  w.write([]byte("{}"))
  return
}

然后我转到 jsfiddle.net 并粘贴以下 js 代码并按“运行”：

fetch('http://192.168.0.21:8000/page', {
  method: 'get',
  headers: {
    'content-type': 'text/plain',
    'organization': 'afae3@@@@@%2fajfoij',
    'authorization': 'basic tajoie#$@asdfall%df;++ji%2f3255',
  }
})

由于某种原因，我的控制台打印 hello world 两次，如下所示：

john@ubuntu:~/go/class="lazy" data-src/myproject$ go run main.go
2018/09/20 18:42:29
2018/09/20 18:42:29 Hello World
2018/09/20 18:42:29 Basic tajoie#$@asdfall%DF;++JI%2F3255
2018/09/20 18:42:29 Hello World

我将我的 js 代码转录为 php，将我的 php 代码与我的 golang 代码放在同一本地主机上，从控制台运行 php 代码，并得到 golang 代码仅执行一次的预期结果。有谁知道发生了什么事吗？我是否误解了 fetch() 的某些内容？我设置标题的方式有什么不寻常的地方吗？

解决方案

这是spencedev答案的扩展

根据用户rmn的建议，本文从cors的角度区分了“简单请求”和“非简单请求”的概念：

https://codeburst.io/cors-story-of-requesting-twice-85219da7172d

标头中 authorization 和 organization 的存在使我的 http 请求从 cors 角度来看成为“非简单请求”，并导致 fetch() 触发 get 和 option 请求，其中 option 请求称为cors 飞行前请求。正如 spencedev 指出的，我的 golang 代码

router.handlefunc("/page", page.search).methods("get","options")

表示 page.search 应该处理 get 和 options 请求。

正如 sberry 所指出的，gorilla 库有一个用于处理 cors 的包。 spencedev 使用 gorilla cors 处理程序的答案的替代方案如下

// main.go
package main

import (

  "route/page"
  "github.com/gorilla/mux"
  "github.com/gorilla/handlers"
  "log"
  "net/http"
)

func main() {

    router := mux.newrouter()

    router.handlefunc("/page", page.search).methods("get")

    headersok := handlers.allowedheaders([]string{"content-type","authorization","organization"})
    originsok := handlers.allowedorigins([]string{"*"})
    methodsok := handlers.allowedmethods([]string{"get", "head", "post", "put", "options"})
    log.fatal(http.listenandserve(":8000", handlers.cors(originsok, headersok, methodsok)(router)))

}

// route/page.go
package page
import (
  "net/http"
  "log"
)


func search(w http.responsewriter, r *http.request) {

  log.println(r.header.get("authorization"))

  log.println("hello world")
  w.write([]byte("{}"))
  return
}

router.handlefunc("/page", page.search).methods("get","options")

告诉路由器将 get 和 options 方法两者定向到搜索处理程序。

cors 预检通常由单独的处理程序处理。在您的例子中，您告诉 go 使用搜索处理程序处理飞行前检查和获取请求。

通常，您希望将飞行前检查与后续请求分开处理，因此请求不会执行两次（无缘无故执行一次。）

飞行前处理程序的一个极其简单的版本是：

func preflighthandler(w http.responsewriter, r *http.request) {
    w.header().set("access-control-allow-origin", "http://localhost")
    w.header().set("vary", "origin")
    w.header().set("vary", "access-control-request-method")
    w.header().set("vary", "access-control-request-headers")
    w.header().set("access-control-allow-headers", "content-type, origin, accept")
    w.header().set("access-control-allow-methods", "get,post,options")
    w.header().set("access-control-allow-credentials", "true")
}

完整的 golang 代码是：

// main.go

package main

import (

  "route/page"
  "github.com/gorilla/mux"
  "log"
  "net/http"
)

func main() {

    router := mux.NewRouter()
    router.HandleFunc("/page", page.PreFlightHandler).Methods("OPTIONS")

    router.HandleFunc("/page", page.Search).Methods("GET")

    log.Fatal(http.ListenAndServe(":8000", router))

}

// route/page.go
package page
import (
  "net/http"
  "log"
)

func PreFlightHandler(w http.ResponseWriter, r *http.Request) {

    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Vary", "Origin")
    w.Header().Set("Vary", "Access-Control-Request-Method")
    w.Header().Set("Vary", "Access-Control-Request-Headers")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type, Origin, Accept, Authorization, Organization")
    w.Header().Set("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
    w.Header().Set("Access-Control-Allow-Credentials", "true")
}
func Search(w http.ResponseWriter, r *http.Request) {

  log.Println(r.Header.Get("authorization"))

  log.Println("Hello World")
  w.Write([]byte("{}"))
  return
}

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持编程网！更多关于Golang的相关知识，也可关注编程网公众号。