go语言因为前端跨域导致无法访问到后端解决方案

前端服务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 app

import (
	"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 string
	if 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 设置预检请求的最大缓存时间。