尽管 tcpdump 显示请求正常发送，却返回 405 Method Not Allowed 和缺少 CORS header 'Access-Control-Allow-Origin'

在使用 Nginx 代理服务器将 Angular 前端请求转发到 Golang 后端时，出现了跨源资源共享 (CORS) 问题和 405 方法不被允许的错误。尽管 TCPdump 显示请求已正常发送，但后端返回 405 错误，并且缺少 CORS 标头 Access-Control-Allow-Origin。在排除服务器端问题并启用 CORS 标头后，发现导致该问题的根源是 Gorilla Mux 路由器中 Methods() 函数的错误使用方法。正确方法应该是将方法作为单独参数传递，而不是将它们一起传递。

这个问题紧接着这个问题，所以一些文本是相同的。

提交表单时，前端尝试将 json 数据 post 到后端时，firefox 控制台上出现错误消息：

“跨源请求被阻止：同源策略不允许读取 https://backend_domain/anteroom 处的远程资源。（原因：缺少 cors 标头“access-control-allow-origin” ）。”

我正在使用 systemd 单元运行 golang 后端，并在 localhost:12345 上提供服务。 nginx 侦听端口 80 并将请求传递给它：

listen 80;
server_name backend_domain;

location / {
    include proxy_params;
    proxy_pass http://localhost:12345/;
}

我使用 pm2 运行 angular 前端作为构建（使用 --prod 标志构建），并在端口 8080 上提供 angular-http-server 服务。与后端相同，nginx 从端口 80 执行其操作：

listen 80;
server_name frontend_domain;

location / {
    include proxy_params;
    proxy_pass http://localhost:8080/;
}

我正在使用的版本：ubuntu 16.04、pm2 3.3.1、angular cli 7.3.4、angular-http-server 1.8.1。

开发人员工具中的 firefox 网络选项卡显示了 post 请求标头：

host: backend_domain
user-agent: mozilla/5.0 (windows nt 10.0; win64; x64; rv:65.0) gecko/20100101 firefox/65.0
accept: application/json, text/plain, */*
accept-language: en-us,en;q=0.5
accept-encoding: gzip, deflate, br
referer: frontend_domain/
content-type: text/plain
content-length: 111
origin: frontend_domain
dnt: 1
connection: keep-alive

以及响应标头：

http/1.1 405 method not allowed
server: nginx/1.10.3 (ubuntu)
date: mon, 11 mar 2019 21:08:24 gmt
content-length: 0
connection: keep-alive
strict-transport-security: max-age=31536000; includesubdomains

当我点击提交按钮时，应该发送到后端的实际请求是：

if (val.issues && val.age && val.gender) {
      this.profile = json.stringify({
        age: val.age,
        gender: val.gender,
        issues: val.issues
      });

      return this.http
        .post(environment.anteroomposturl, this.profile, {
          observe: "response"
        })

firefox 显示此操作已成功触发，json 显示在开发工具中网络的“参数”选项卡下。

此响应向我表明，不知何故，nginx 不会将请求传递到端口 12345 的后端。否则，它会检索并将标头从我的 golang 代码中所示的后端传递回前端，对吗？

我了解到 cors 是服务器端问题。因此，我尝试在任何有服务器的地方启用它，即后端、nginx 和 angular-http-server。

它已在我的 golang 代码中启用：

func anteroom(res http.responsewriter, req *http.request) {
    res.header().set("access-control-allow-origin", "*")
    res.header().set("access-control-allow-methods", "post, options")
    res.header().set("access-control-allow-headers", "content-type")
    res.header().set("content-type", "application/json")
...
}

func main() {
    ...
    # using gorilla mux router.
    router := mux.newrouter()
    router.handlefunc("/anteroom", anteroom).methods("post, options")
}

这成功地实现了 cors 的开发，其中服务 golang 只需打开其构建的二进制文件，而 angular 则通过 ngserve 提供服务。

以上内容在生产中还不够。所以，我尝试使用 angular-http-server 启用它。请注意末尾的 --cors 标志：

pm2 start $(which angular-http-server) --name app -- --path /path/to/dist -p 8080 --cors

我还尝试在后端和前端 nginx 文件中启用它（改编自此处）：

location / {
proxy_pass http://localhost:8080; # or 12345 if it's the back end conf
if ($request_method = 'options') {
        add_header 'access-control-allow-origin' '*';
        add_header 'access-control-allow-methods' 'get, post, options';
        add_header 'access-control-allow-headers' 'content-type';
        add_header 'content-type' 'application/json';
        return 204;
     }

     if ($request_method = 'post') {
        add_header 'access-control-allow-origin' '*';
        add_header 'access-control-allow-methods' 'get, post, options';
        add_header 'access-control-allow-headers' 'content-type';
        add_header 'content-type' 'application/json';
     }

     if ($request_method = 'get') {
        add_header 'access-control-allow-origin' '*';
        add_header 'access-control-allow-methods' 'get, post, options';
        add_header 'access-control-allow-headers' 'content-type';
     }
}
}

奇怪的是，无论标头是否在 nginx 文件中，tcpdump -vvvs 1024 -l -a src host backend_domain | grep 'access-control-allow-origin:' 产生以下内容：

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
        Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
        Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
        Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
        Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
        Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *

不知道为什么它会重复 12 次，但是无论如何，后端在前端加载的那一刻就发送了上述内容（这意味着 nginx 确实成功地将请求传递到端口 12345，对吧？）。当我单击“提交”按钮提交表单时，它不会发送它们。我不知道这是否是正确的行为，或者是否表明出现了问题。

我错过了什么？

2019 年 3 月 12 日晚上 7 点半更新：

正如上面所见以及 sideshowbarker 在评论中指出的，有一个“405 method not allowed”响应。我一开始以为这与 cors 问题以及 nginx 有关。为了验证这一点，我停止了 nginx，并打开了端口 12345 的防火墙，以便我可以直接 post 到 golang 后端。

为了避免同源策略带来的任何复杂性，我使用 curl 从另一台计算机进行 post： curl -v -x post -h 'content-type: application/json' -d '{"age":"l ","gender":"l","issues":"l"}' http://droplet_ip:12345/anteroom

我得到了完全相同的响应：“http/1.1 405 方法不允许”。

此时，我最好的猜测是 golang 后端不允许 post，即使代码中明确允许，如上所示。我不知道为什么。

解决方案

问题主要是由于 Golang 代码中 main() 中 Gorilla mux 的这一行造成的：

router.HandleFunc("/anteroom", anteroom).Methods("POST, OPTIONS")

注意后面的方法：("POST, OPTIONS")。这是错误的。应该是 ("POST", "OPTIONS")。它们必须单独引用。

这与我们在net/http页面的函数中设置方法不同：res.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS")。在这里，它们被一起引用。

我认为可能存在各种各样的问题，但这是一次如此累人的旅程，我现在只记得最后一个。

好了，本文到此结束，带大家了解了《尽管 tcpdump 显示请求正常发送，却返回 405 Method Not Allowed 和缺少 CORS header 'Access-Control-Allow-Origin'》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多Golang知识！