golang 服务器上的 CORS 和 javascript 获取前端答案

【问题标题】：CORS on golang server & javascript fetch frontendgolang 服务器上的 CORS 和 javascript 获取前端
【发布时间】：2017-03-21 23:32:53
【问题描述】：

我有一个 golang HTTP 服务器，代码如下：

    http.HandleFunc("/login", func(w http.ResponseWriter, r *http.Request) {
    log.Println("New incoming request")

    // Authenticate
    if u, p, ok := r.BasicAuth(); ok {
      log.Println("Success")
      return
    }
    log.Println("Failed")

我从一个 JS 前端调用这个 HTTP 端点，这是一个部署在端口 3000 上的反应应用程序，使用代码：

      fetch('http://localhost:8080/login', {
            method: 'post',
            headers: {
                'Authorization': 'Basic ' + btoa(authHeader),
                'Content-Type': 'application/x-www-form-urlencoded',
                'Access-Control-Allow-Origin': '*'
            },
                body: 'A=1&B=2'
            })
            .then(function (response) {
                console.log("Authentication Success")
            })
            .catch(function (err) {
                console.log("Authentication fail", err)
            });

上述代码失败并显示以下日志。

在服务器端：

New incoming request
Failed

在浏览器上，在开发者工具日志中：

Fetch API cannot load http://localhost:8080/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

有人可以帮助解决身份验证问题吗？我不确定我是在服务器端遗漏了与 CORS 相关的内容，还是在客户端进行了错误的身份验证。有什么帮助吗？谢谢。

【问题讨论】：

请显示 cors 的 go 设置。
Access-Control-Allow-Origin 不是请求标头，它应该在服务器响应中。阅读en.wikipedia.org/wiki/…
Fetch API cannot load http://localhost:8080/login. Response for preflight has invalid HTTP status code 401 是我在服务器 HTTP 处理程序中添加 w.Header().Set("Access-Control-Allow-Origin", "*") 时收到的错误消息。截至目前，服务器代码没有任何与 CORS 相关的代码，我正在寻找它。

标签： javascript go cors

【解决方案1】：

Access-Control-Allow-Origin: * 必须从服务器发送，而不是由客户端发送。假设你在一个标准的 net/http 处理函数中，试试这个代码：

func handler(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Access-Control-Allow-Origin", "*")
    if (r.Method == "OPTIONS") {
        w.Header().Set("Access-Control-Allow-Headers", "Authorization") // You can add more headers here if needed
    } else {
        // Your code goes here
    }
}

【讨论】：

我之前尝试过，但没有成功。我在 chrome 中得到：Fetch API cannot load http://localhost:8080/login. Response for preflight has invalid HTTP status code 401 。 ok 在服务器端仍然是 false。
您看到的是来自 CORS 预检检查的错误消息。请参阅 stackoverflow.com/questions/22972066/… 了解如何在 Go 中实现。
对于来自浏览器的每个请求，我在服务器端日志中只得到一个New incoming request。根据服务器端日志，没有两个请求（一个 r.POST 和另一个 r.OPTIONS）。
是的，您收到 OPTIONS 请求，之后浏览器中止。如果您正确实现了预检，浏览器将继续发送实际的 fetch 请求。
您能否更新您的代码以包含 OPTIONS 处理？无论我尝试过什么似乎都无法解决问题。我的服务器当前拥有的所有代码都在问题中。

【解决方案2】：

首先 - 您需要在处理程序中使用架构：

w.Header().Set("Access-Control-Allow-Origin", "*")
    if (r.Method == "OPTIONS") {
        w.Header().Set("Access-Control-Allow-Headers", "Authorization") // You can add more headers here if needed
    } else {
        // Your code goes here
    }

但在此之前您需要在主“OPTIONS”中指定：

router.HandleFunc("/your_route/", your_method).Methods("POST", "OPTIONS")

这是因为您的浏览器执行了 2 个请求 - 首先检查使用某些标头的能力（例如授权），下一步是发布数据

【讨论】：