cors跨域问题解决

原创已于 2025-09-29 13:42:20 修改 · 866 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#cros

于 2025-09-29 13:29:26 首次发布

golang后端框架gin如果设置了分组的group请求前缀，跨域有些不一样。

r1 := gin.Default()
	r := r1.Group("/game")
	webSocket := server.NewWebSocket()
	r1.NoRoute(cors.New(
		cors.Config{
			AllowOrigins: allowOrigins,
			AllowMethods: []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"},
			AllowHeaders: []string{
				"*",
			},
			AllowCredentials: true,
			MaxAge:           12 * time.Hour,
		},
	))
	// websocket单独处理,正常http请求按照router.Register方式来写
	r.Use(
		cors.New(
			cors.Config{
				AllowOrigins: allowOrigins,
				AllowMethods: []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"},
				AllowHeaders: []string{
					"*",
				},
				AllowCredentials: true,
				MaxAge:           12 * time.Hour,
			},
		),
	).Use(TraceIDHandler()).Use(timeoutMiddleware()).Use(gin.CustomRecovery(customRecoveryHandler)).
		Use(RequestUserInfo()).Use(RequestLogMiddleware()).Use(ResponseHeaderSet())
r.Group.POST(path, r.Handle)

通过查看

r.Group.POST(path, r.Handle)的源码得知：

func (group *RouterGroup) handle(httpMethod, relativePath string, handlers HandlersChain) IRoutes {
	absolutePath := group.calculateAbsolutePath(relativePath)
	handlers = group.combineHandlers(handlers)
	group.engine.addRoute(httpMethod, absolutePath, handlers)
	return group.returnObj()
}

如果写了

r.POST(path, r.Handle)，则以上源码中的
group.engine.addRoute(httpMethod, absolutePath, handlers)
只会将post方法对应的跨域用的cors的handler来处理注册到engine中。而对于options方法的请求是不会用这个handlers来处理的。

如果想解决此问题，有两个方案：
1. 对于post/get等请求，不只是写

r.POST(path, r.Handle)，而是增加r.OPTIONS(path, r.Handle)，将options也写入到engine的处理的method中

2. 增加这个方法：

r1.NoRoute(cors.New(
    cors.Config{
       AllowOrigins: allowOrigins,
       AllowMethods: []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"},
       AllowHeaders: []string{
          "*",
       },
       AllowCredentials: true,
       MaxAge:           12 * time.Hour,
    },
))

这是告诉engine。如果存在不理解的method。则用norout中定义的hanlder处理。那么我们这里定义了cors的hanlder方法。因为options没有在engine中注册过，因此会采用这个noroute中注入的hanler cors来处理。也满足条件。我在代码中就是用的这种方式

二. 进入cros的判断

如果前端发送请求时没有配置credentials: 'include'。则前端的header中即使有'Authorization': 'Bearer xxxx'头，浏览器依然不认为则是一个'带有凭据'的请求。

1. 如果不设置credentials: 'include'，则后端设置AllowOrigins具体的域名，AllowHeaders设置为*，都可以通过跨域请求

但是如果如下设置：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨域测试页面</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>跨域测试</h1>
<div>
<input type="button" οnclick="mySubmit()" value=" 发送跨域请求 ">
</div>
<script>
function mySubmit() {
fetch("http://localhost:8082/game/v1/new_game", {
method: "POST",
credentials:"include",
headers: {
'Content-Type': 'application/json; charset=utf-8',
'Authorization': 'Bearer xxxx'
},
body: JSON.stringify({"name": "Java"})
})
.then(response => response.json())
.then(result => alert("返回数据：" + result.data))
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>

增加了credentials:"include",

根据cors的规范：

禁止在Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true的时候，前端发送带有凭据的请求能够通过cros。

2. 实际测试过程中发现会更严格；
即使设置了AllowOrigins，但是AllowHeaders设置为*。也是无法通过跨域请求的。

r1.NoRoute(cors.New(
    cors.Config{
       AllowOrigins: allowOrigins,
       AllowMethods: []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"},
       AllowHeaders: []string{
          "*",
       },
       AllowCredentials: true,
       MaxAge:           12 * time.Hour,
    },
))

必须指定AllowHeaders。同时，不能只设置r1.NoRoute，对实际的post请求也要设置好，也就是

r.Use(也要对AllowHeaders进行指定。

3. 通过测试来看，似乎前端不增加 credentials:"include",的话，后端的

AllowHeaders选择通配符是能够跨域成功的。