Vue + Golang项目axios带Authorization头调用Gin接口报CORS错误如何解决

你遇到的CORS错误由两个问题共同导致：

• gin-contrib/cors的默认配置未将Authorization纳入允许的请求头列表，浏览器预检请求校验不通过
• 自定义的身份校验中间件会拦截OPTIONS类型的预检请求，预检请求不会携带Authorization头，直接返回400错误导致CORS流程失败

仅需修改App.go文件即可，改动如下：

package main

import (
    "fmt"
    "time"

    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)

func main() {
    router := gin.Default()
    // 替换默认CORS配置，自定义允许的头和规则
    router.Use(cors.New(cors.Config{
        AllowOrigins:     []string{"http://localhost:5500"}, // 允许前端地址，生产环境替换为实际域名
        AllowMethods:     []string{"GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"},
        AllowHeaders:     []string{"Origin", "Content-Type", "Authorization"}, // 新增允许Authorization头
        ExposeHeaders:    []string{"Content-Length"},
        AllowCredentials: true,
        MaxAge: 12 * time.Hour, // 预检请求缓存时间，减少重复预检
    }))
    router.Use(Authenticate())

    v1 := router.Group("/greet")
    {
        v1.POST("/hello", handleFunc)
    }
    router.Run(":5000")
}

func handleFunc(c *gin.Context) {
    var student struct {
        Name string `json:"name"`
    }

    if c.BindJSON(&student) != nil {
        c.JSON(400, gin.H{"message": "Provide required details."})
        c.Abort()
        return
    }

    message := fmt.Sprintf("%s%s", "Good Morning ", student.Name)

    c.JSON(200, gin.H{"message": message})
}

func Authenticate() gin.HandlerFunc {
    return func(c *gin.Context) {
        // 跳过OPTIONS预检请求的身份校验
        if c.Request.Method == "OPTIONS" {
            c.Next()
            return
        }

        requiredToken := c.Request.Header["Authorization"]

        if len(requiredToken) == 0 {
            c.JSON(400, gin.H{"message": "No token found"})
            c.Abort()
            return
        }

        fmt.Println(requiredToken)

        c.Next()
    }
}

1. 替换默认CORS配置：手动添加Authorization到AllowHeaders列表，允许前端传递该自定义头，同时明确允许前端源地址和请求方法
2. 身份校验中间件新增OPTIONS请求跳过逻辑：预检请求不会携带业务自定义头，跳过校验保证CORS流程正常完成，业务请求的身份校验不受影响

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