React调用Golang Gorilla Mux API遇CORS预检失败问题求助

问题根源 #

你发起的POST请求携带了Content-Type: application/json，浏览器会自动发送OPTIONS预请求校验跨域权限。当前的CORS中间件仅设置了响应头，但未直接处理OPTIONS请求，而是将其传递给Gorilla Mux路由。由于/commands/路由仅注册了POST方法，Mux无法匹配OPTIONS请求，返回405状态码，导致预请求失败，进而触发后续CORS错误。

修复方案 #

方案1：修改CORS中间件直接处理OPTIONS请求 #

这是最简洁的全局解决方案，修改enableCORS中间件，遇到OPTIONS请求时直接返回200响应，无需传递给后续路由：

func enableCORS(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        // 设置CORS响应头
        w.Header().Set("Access-Control-Allow-Origin", "*")
        w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
        w.Header().Set("Access-Control-Allow-Headers", "Origin, Content-Type, Accept")

        // 处理OPTIONS预请求，直接返回200
        if r.Method == http.MethodOptions {
            w.WriteHeader(http.StatusOK)
            return
        }

        // 非OPTIONS请求，继续执行后续逻辑
        next.ServeHTTP(w, r)
    })
}

方案2：为路由添加OPTIONS方法支持 #

如果不想修改中间件，可以在注册路由时显式添加OPTIONS方法，让Mux能匹配到请求：

r.HandleFunc("/commands/", postCommands).Methods("POST", "OPTIONS")

⚠️ 注意：这种方式需要给所有需要跨域的路由都添加OPTIONS方法，维护成本较高，优先推荐方案1。

额外提示 #

• 你的fetch请求设置了credentials: 'same-origin'，若后续需要传递Cookie等凭证，需将Access-Control-Allow-Origin设为前端具体域名（如http://localhost:3000），同时添加w.Header().Set("Access-Control-Allow-Credentials", "true")，此时不能使用*作为允许源。
• 确保CORS中间件是第一个被注册到路由的（你当前代码的r.Use(enableCORS)位置正确，无需调整）。

内容的提问来源于stack exchange，提问作者P2000Gua