前端服务8080访问后端8081这端口显示跨域了

ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14) at Axios.request (webpack-internal:///./node_modules/axios/lib/core/Axios.js:58:41) at async getCurrentUser (webpack-internal:///./src/api/user.ts:50:10) at async Proxy.fetchLoginUser (webpack-internal:///./src/store/useLoginUserStore.ts:17:17)

跨域问题通常是由于浏览器的同源策略导致的。需要在 Gin 服务器中启用 CORS（跨域资源共享）。Gin 提供了一个中间件 gin-contrib/cors 来方便地处理 CORS 请求。

启用 CORS 的步骤：

安装gin-contrib/cors中间件：
可以使用 go get 命令来安装这个中间件。

go get github.com/gin-contrib/cors

package appimport ("fmt""github.com/gin-contrib/cors""github.com/gin-gonic/gin""log""net/http""time"
)func HttpServer() {ginServer := gin.Default()// 配置 CORS 中间件config := cors.DefaultConfig()config.AllowOrigins = []string{"http://localhost:8080"}                                     // 允许8080来源的请求，生产环境中建议指定具体的域名config.AllowMethods = []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"}                   // 允许的请求方法config.AllowHeaders = []string{"Origin", "Content-Length", "Content-Type", "Authorization"} //  允许的请求头config.ExposeHeaders = []string{"Content-Length"}                                           // 允许的响应头config.AllowCredentials = true                                                              // 允许携带凭证config.MaxAge = 12 * time.Hour                                                              // 预检请求缓存时间ginServer.Use(cors.New(config)) // 使用 CORS 中间件// 注册路由和处理函数ginServer.POST("/api/backup", backupHandler)ginServer.POST("/api/user/register", userRegisterHandler)ginServer.POST("/api/user/login", userLoginHandler)ginServer.POST("/api/user/logout", userLogoutHandler)ginServer.GET("/api/user/current", getCurrentUserHandler)ginServer.GET("/api/user/search", searchUserHandler)ginServer.POST("/api/user/delete", deleteUserHandler)if err := ginServer.Run(":8081"); err != nil {log.Fatalf("HTTP server failed to start: %v", err)}
}// 备份处理函数
func backupHandler(context *gin.Context) {var login struct {Username string `json:"username"`Password string `json:"password"`}if err := context.ShouldBindJSON(&login); err != nil {context.JSON(http.StatusBadRequest, gin.H{"code": http.StatusBadRequest,"msg":  "invalid request",})return}if login.Username == "admin" && login.Password == "123456" {context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg":  "success",})fmt.Println("成功执行这个代码")} else {context.JSON(http.StatusUnauthorized, gin.H{"code": http.StatusUnauthorized,"msg":  "invalid credentials",})}
}// 用户注册处理函数
func userRegisterHandler(context *gin.Context) {var user struct {Username string `json:"username"`Password string `json:"password"`}if err := context.ShouldBindJSON(&user); err != nil {context.JSON(http.StatusBadRequest, gin.H{"code": http.StatusBadRequest,"msg":  "invalid request",})return}// 检查用户名是否已存在// 这里可以添加数据库操作或其他逻辑if user.Username == "admin" {context.JSON(http.StatusConflict, gin.H{"code": http.StatusConflict,"msg":  "username already exists",})return}// 添加新用户// 这里可以添加数据库操作或其他逻辑fmt.Println("User registered:", user.Username)context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg":  "user registered successfully",})
}// 用户登录处理函数
func userLoginHandler(context *gin.Context) {var user struct {Username string `json:"username"`Password string `json:"password"`}if err := context.ShouldBindJSON(&user); err != nil {context.JSON(http.StatusBadRequest, gin.H{"code": http.StatusBadRequest,"msg":  "invalid request",})return}// 验证用户名和密码// 这里可以添加数据库操作或其他逻辑if user.Username == "admin" && user.Password == "123456" {context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg":  "login successful",})return}context.JSON(http.StatusUnauthorized, gin.H{"code": http.StatusUnauthorized,"msg":  "invalid credentials",})
}// 用户登出处理函数
func userLogoutHandler(context *gin.Context) {// 这里可以添加登出逻辑，例如清除会话等context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg":  "logout successful",})
}// 获取当前用户信息处理函数
func getCurrentUserHandler(context *gin.Context) {// 这里可以添加获取当前用户逻辑，例如从会话中获取用户信息user := struct {Username string `json:"username"`}{Username: "admin"} // 示例用户context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg":  "success","user": user,})
}// 获取用户列表处理函数
func searchUserHandler(context *gin.Context) {username := context.Query("username")user := struct {Username string `json:"username"`}{Username: username} // 示例用户context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg":  "success","user": user,})
}// 删除用户处理函数
func deleteUserHandler(context *gin.Context) {var id stringif err := context.ShouldBindJSON(&id); err != nil {context.JSON(http.StatusBadRequest, gin.H{"code": http.StatusBadRequest,"msg":  "invalid request",})return}// 删除用户逻辑// 这里可以添加数据库操作或其他逻辑fmt.Println("User deleted:", id)context.JSON(http.StatusOK, gin.H{"code": http.StatusOK,"msg":  "user deleted successfully",})
}

说明

1. 安装 gin-contrib/cors：使用 go get github.com/gin-contrib/cors 安装中间件。
2. 配置 CORS 中间件：在 HttpServer 函数中使用 cors.DefaultConfig() 配置 CORS 设置，并将其应用到 Gin 服务器。
3. 允许的来源：config.AllowOrigins = []string{"*"} 允许所有来源的请求。在生产环境中，建议指定具体的域名以提高安全性。
4. 允许的方法：config.AllowMethods 指定允许的 HTTP 方法。
5. 允许的头部：config.AllowHeaders 指定允许的请求头部。
6. 暴露的头部：config.ExposeHeaders 指定允许暴露的响应头部。
7. 允许凭证：config.AllowCredentials 允许发送凭证（如 cookies）。
8. 最大缓存时间：config.MaxAge 设置预检请求的最大缓存时间。