当前位置: 首页 > news >正文

cors跨域疑问解决

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选择通配符是能够跨域成功的。

http://www.jsqmd.com/news/14181/

相关文章:

  • D. Not Alone
  • MPC模型预测控制:原理、设计与MATLAB实现
  • 2025年焊接变位机厂家最新权威推荐榜:双轴变位机专业制造商,高效稳定助力智能焊接升级
  • 体育视频分析中的计算机视觉技术创新
  • 美股 SaaS 巨头如何用 Karpenter 节省 1/4 的 EC2 成本
  • 2025年法兰罩厂家最新权威推荐榜:专业防护与精密制造,工业管道安全守护者优选品牌
  • 2025 年膜结构厂家最新推荐排行榜:含车棚 / 看台 / 景观等产品实力企业盘点与选择指南
  • 题解:qoj7303 City United
  • 多网融合实战指南:4G、Wi-Fi与以太网的智能协同之道
  • 最佳实践:基于Apache SeaTunnel从MySQL同步到PostgreSQL
  • 2025年冲压件厂家最新权威推荐榜:新能源/光伏/精密/异形/五金/铝/汽配/不锈钢/家具冲压件源头实力解析
  • 完整教程:PaVeRL - SQL:基于部分匹配奖励与语言强化学习的 Text-to-SQL 技术
  • 2025年抖音推广服务商最新权威推荐榜:专业运营团队与高转化率方案深度解析,助力品牌精准引流与爆款打造
  • 基于模糊深度信念网络(FDBN)的情感分析实现与优化
  • 2025年卷板机厂家综合推荐榜:折弯机/液压机厂家助力制造业智能化升级
  • Python 实现 Ping 功能
  • 2025年焊接机器人厂家最新权威推荐榜:激光/自动/智能/工业/国产焊接机器人系统、机器人焊接设备、汽车/钢结构/氩弧焊焊接机器人公司精选
  • 2025年保洁公司最新权威推荐榜单:专业家政服务与深度清洁口碑优选,家庭保洁、企业保洁、开荒保洁全方位解析
  • C语言学习——变量
  • RabbitMQ投递回调机制以及策略业务补偿
  • 2025年大连媒体投放公司最新权威推荐榜:覆盖传统媒体/新媒体/户外广告投放的优质服务商深度解析
  • 显卡参数对算力性能的影响
  • 多物理域协同 + 三维 CAD 联动!ADS 2025 解锁射频前端、天线设计新体验
  • MySQL—— 备份与恢复
  • win10自带锁屏壁纸和Windows聚焦壁纸路径
  • 读书笔记:时间间隔类型:轻松管理时长与时间点
  • 2025 年最新推荐!除尘器厂家权威排行榜发布,深度解析各品牌技术实力与市场口碑
  • 实用指南:【Git】项目管理全解
  • 在浏览器播放多个视频 opencv+Nicegui
  • WSL2内部挂载NFS共享文件夹