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 下令来安装这个中心件。

1. go get github.com/gin-contrib/cors

复制代码

1. package app
3. import (
4.         "fmt"
5.         "github.com/gin-contrib/cors"
6.         "github.com/gin-gonic/gin"
7.         "log"
8.         "net/http"
9.         "time"
10. )
12. func HttpServer() {
13.         ginServer := gin.Default()
15.         // 配置 CORS 中间件
16.         config := cors.DefaultConfig()
17.         config.AllowOrigins = []string{"http://localhost:8080"}                                     // 允许8080来源的请求，生产环境中建议指定具体的域名
18.         config.AllowMethods = []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"}                   // 允许的请求方法
19.         config.AllowHeaders = []string{"Origin", "Content-Length", "Content-Type", "Authorization"} //  允许的请求头
20.         config.ExposeHeaders = []string{"Content-Length"}                                           // 允许的响应头
21.         config.AllowCredentials = true                                                              // 允许携带凭证
22.         config.MaxAge = 12 * time.Hour                                                              // 预检请求缓存时间
24.         ginServer.Use(cors.New(config)) // 使用 CORS 中间件
26.         // 注册路由和处理函数
27.         ginServer.POST("/api/backup", backupHandler)
28.         ginServer.POST("/api/user/register", userRegisterHandler)
29.         ginServer.POST("/api/user/login", userLoginHandler)
30.         ginServer.POST("/api/user/logout", userLogoutHandler)
31.         ginServer.GET("/api/user/current", getCurrentUserHandler)
32.         ginServer.GET("/api/user/search", searchUserHandler)
33.         ginServer.POST("/api/user/delete", deleteUserHandler)
35.         if err := ginServer.Run(":8081"); err != nil {
36.                 log.Fatalf("HTTP server failed to start: %v", err)
37.         }
38. }
40. // 备份处理函数
41. func backupHandler(context *gin.Context) {
42.         var login struct {
43.                 Username string `json:"username"`
44.                 Password string `json:"password"`
45.         }
47.         if err := context.ShouldBindJSON(&login); err != nil {
48.                 context.JSON(http.StatusBadRequest, gin.H{
49.                         "code": http.StatusBadRequest,
50.                         "msg":  "invalid request",
51.                 })
52.                 return
53.         }
55.         if login.Username == "admin" && login.Password == "123456" {
56.                 context.JSON(http.StatusOK, gin.H{
57.                         "code": http.StatusOK,
58.                         "msg":  "success",
59.                 })
60.                 fmt.Println("成功执行这个代码")
61.         } else {
62.                 context.JSON(http.StatusUnauthorized, gin.H{
63.                         "code": http.StatusUnauthorized,
64.                         "msg":  "invalid credentials",
65.                 })
66.         }
67. }
69. // 用户注册处理函数
70. func userRegisterHandler(context *gin.Context) {
71.         var user struct {
72.                 Username string `json:"username"`
73.                 Password string `json:"password"`
74.         }
76.         if err := context.ShouldBindJSON(&user); err != nil {
77.                 context.JSON(http.StatusBadRequest, gin.H{
78.                         "code": http.StatusBadRequest,
79.                         "msg":  "invalid request",
80.                 })
81.                 return
82.         }
84.         // 检查用户名是否已存在
85.         // 这里可以添加数据库操作或其他逻辑
86.         if user.Username == "admin" {
87.                 context.JSON(http.StatusConflict, gin.H{
88.                         "code": http.StatusConflict,
89.                         "msg":  "username already exists",
90.                 })
91.                 return
92.         }
94.         // 添加新用户
95.         // 这里可以添加数据库操作或其他逻辑
96.         fmt.Println("User registered:", user.Username)
97.         context.JSON(http.StatusOK, gin.H{
98.                 "code": http.StatusOK,
99.                 "msg":  "user registered successfully",
100.         })
101. }
103. // 用户登录处理函数
104. func userLoginHandler(context *gin.Context) {
105.         var user struct {
106.                 Username string `json:"username"`
107.                 Password string `json:"password"`
108.         }
110.         if err := context.ShouldBindJSON(&user); err != nil {
111.                 context.JSON(http.StatusBadRequest, gin.H{
112.                         "code": http.StatusBadRequest,
113.                         "msg":  "invalid request",
114.                 })
115.                 return
116.         }
118.         // 验证用户名和密码
119.         // 这里可以添加数据库操作或其他逻辑
120.         if user.Username == "admin" && user.Password == "123456" {
121.                 context.JSON(http.StatusOK, gin.H{
122.                         "code": http.StatusOK,
123.                         "msg":  "login successful",
124.                 })
125.                 return
126.         }
128.         context.JSON(http.StatusUnauthorized, gin.H{
129.                 "code": http.StatusUnauthorized,
130.                 "msg":  "invalid credentials",
131.         })
132. }
134. // 用户登出处理函数
135. func userLogoutHandler(context *gin.Context) {
136.         // 这里可以添加登出逻辑，例如清除会话等
137.         context.JSON(http.StatusOK, gin.H{
138.                 "code": http.StatusOK,
139.                 "msg":  "logout successful",
140.         })
141. }
143. // 获取当前用户信息处理函数
144. func getCurrentUserHandler(context *gin.Context) {
145.         // 这里可以添加获取当前用户逻辑，例如从会话中获取用户信息
146.         user := struct {
147.                 Username string `json:"username"`
148.         }{Username: "admin"} // 示例用户
149.         context.JSON(http.StatusOK, gin.H{
150.                 "code": http.StatusOK,
151.                 "msg":  "success",
152.                 "user": user,
153.         })
154. }
156. // 获取用户列表处理函数
157. func searchUserHandler(context *gin.Context) {
158.         username := context.Query("username")
159.         user := struct {
160.                 Username string `json:"username"`
161.         }{Username: username} // 示例用户
162.         context.JSON(http.StatusOK, gin.H{
163.                 "code": http.StatusOK,
164.                 "msg":  "success",
165.                 "user": user,
166.         })
167. }
169. // 删除用户处理函数
170. func deleteUserHandler(context *gin.Context) {
171.         var id string
172.         if err := context.ShouldBindJSON(&id); err != nil {
173.                 context.JSON(http.StatusBadRequest, gin.H{
174.                         "code": http.StatusBadRequest,
175.                         "msg":  "invalid request",
176.                 })
177.                 return
178.         }
180.         // 删除用户逻辑
181.         // 这里可以添加数据库操作或其他逻辑
182.         fmt.Println("User deleted:", id)
183.         context.JSON(http.StatusOK, gin.H{
184.                 "code": http.StatusOK,
185.                 "msg":  "user deleted successfully",
186.         })
187. }

复制代码

分析

• 安装 gin-contrib/cors：使用 go get github.com/gin-contrib/cors
  安装中心件。
  
• 设置 CORS 中心件：在 HttpServer 函数中使用 cors.DefaultConfig() 设置 CORS 设置，并将其应用到 Gin 服务器。
  
• 答应的泉源：config.AllowOrigins = []string{"*"} 答应全部泉源的哀求。在生产环境中，发起指定详细的域名以进步安全性。
  
• 答应的方法：config.AllowMethods 指定答应的 HTTP 方法。
  
• 答应的头部：config.AllowHeaders 指定答应的哀求头部。
  
• 袒露的头部：config.ExposeHeaders 指定答应袒露的相应头部。
  
• 答应根据：config.AllowCredentials 答应发送根据（如 cookies）。
  
• 最大缓存时间：config.MaxAge 设置预检哀求的最大缓存时间。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告