Gin+Vue项目CORS跨域错误排查与解决求助

针对你的Gin+Vue项目登录接口出现的CORS错误，以下是几种直接有效的解决方法：

方法一：使用Gin官方CORS中间件 #

这是最简便的方案，借助gin-contrib/cors包快速配置跨域规则：

1. 先安装依赖：

go get github.com/gin-contrib/cors

2. 在主函数中添加CORS配置：

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

func main() {
    r := gin.Default()

    // 自定义CORS配置
    corsConfig := cors.DefaultConfig()
    // 替换为你的Vue前端实际域名（本地开发通常是http://localhost:8080）
    corsConfig.AllowOrigins = []string{"http://localhost:8080"}
    // 允许所有HTTP方法
    corsConfig.AllowMethods = []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"}
    // 允许包含JWT所需的Authorization头在内的自定义请求头
    corsConfig.AllowHeaders = []string{"Origin", "Content-Type", "Authorization"}
    // 允许携带凭证（如需要传递Cookie时开启，JWT场景可选）
    corsConfig.AllowCredentials = true

    // 注册CORS中间件
    r.Use(cors.New(corsConfig))

    // 挂载你的路由
    r.POST("/login", userController.Login)
    // ...其他路由配置

    r.Run(":8000")
}

关键说明：

• 不要将AllowOrigins设为*同时开启AllowCredentials，浏览器会拒绝这种配置；
• 生产环境建议通过环境变量或配置文件动态加载允许的域名，避免硬编码。

方法二：手动编写CORS中间件 #

如果不想引入第三方包，可自行实现跨域处理逻辑：

import "github.com/gin-gonic/gin"

func corsMiddleware() gin.HandlerFunc {
    return func(c *gin.Context) {
        // 获取请求源
        origin := c.Request.Header.Get("Origin")
        // 仅允许指定的前端域名
        allowedOrigins := []string{"http://localhost:8080"}
        for _, o := range allowedOrigins {
            if o == origin {
                c.Writer.Header().Set("Access-Control-Allow-Origin", origin)
                break
            }
        }

        // 设置允许的方法和请求头
        c.Writer.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
        c.Writer.Header().Set("Access-Control-Allow-Headers", "Origin, Content-Type, Authorization")
        c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")

        // 处理OPTIONS预检请求，直接返回204状态码
        if c.Request.Method == "OPTIONS" {
            c.AbortWithStatus(204)
            return
        }

        c.Next()
    }
}

// 在主函数中使用中间件
func main() {
    r := gin.Default()
    r.Use(corsMiddleware())

    // 路由配置
    r.POST("/login", userController.Login)
    // ...其他路由

    r.Run(":8000")
}

前端配合注意事项 #

如果你的前端使用axios发送请求，确保请求头配置正确：

// 登录请求
axios.post('http://localhost:8000/login', {
  username: 'your-username',
  password: 'your-password'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
// 登录成功后，后续接口携带JWT令牌
axios.get('http://localhost:8000/api/user', {
  headers: {
    'Authorization': `Bearer ${your-jwt-token}`
  }
})

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