当前位置: 首页 > 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.zskr.cn/news/21656.html

相关文章:

  • D. Not Alone
  • 体育视频分析中的计算机视觉技术创新
  • 2025 年膜结构厂家最新推荐排行榜:含车棚 / 看台 / 景观等产品实力企业盘点与选择指南
  • 多网融合实战指南:4G、Wi-Fi与以太网的智能协同之道
  • 完整教程:PaVeRL - SQL:基于部分匹配奖励与语言强化学习的 Text-to-SQL 技术
  • 2025年卷板机厂家综合推荐榜:折弯机/液压机厂家助力制造业智能化升级
  • RabbitMQ投递回调机制以及策略业务补偿
  • Cookie如何设置HTTPOnly和Secure 以防止XSS跨站脚本攻击
  • Vue中展示字符串,有换行符的怎么换行展示
  • 容器技术k8s - 指南
  • c语言之对齐函数代码示例
  • 什么是Barriers IO
  • MySQL中NULL值的5个反直觉行为,扭到了吗?
  • 2025 最新阳澄湖大闸蟹权威推荐排行榜,揭秘优质品牌的独特魅力大闸蟹蟹卡 / 大闸蟹礼盒 / 大闸蟹礼券 / 好蟹汇大闸蟹选择指南
  • 碳中和背景下的能源数字化:MyEMS 为企业提供精准碳管理方案
  • 桌面预测类编写,桌面%雷达,信号预测%系统构建,基于python,tk,scikit-learn机器学习算法实现,桌面预支持向量机分类算法,CSV无数据库
  • UEFI安装Windows 7 64位
  • MySQL,SqlServer,postgresql中,如何实现锁定一张表
  • 本地虚拟机windows 安装mysql数据库版本可选,外部如何连接
  • MLGO微算法科技创新AI技术:基于DRL的设备边缘协同推理优化系统,助力无线智能感知进入“极致高效”时代
  • C 语言 - fopen、fprintf、fread、fwrite、fputc 操作文件函数解析
  • 2025 碳晶板厂家最新推荐榜:含木纹 / 白色 / 全屋整装等品类,西南及全国优质厂家权威甄选指南
  • 把列表中所有姓周的人的信息删掉(此题有坑, 请慎重): lst = [周⽼⼆, 周星星, 麻花藤, 周扒⽪] # 结果: lst = [麻花藤]
  • 2022 ICPC 香港 L
  • AI 姓氏头像生成小程序管理系统:专属头像定制与流量变现解决方案
  • 2025年锅炉厂家最新权威推荐榜:工业锅炉、燃气锅炉、电热锅炉、蒸汽锅炉专业制造商实力解析与选购指南
  • CCSP2025 游记
  • 2025 年国内算力云公司最新推荐排行榜:聚焦 AI 训推与 MaaS 服务,助力企业精准选优质合作伙伴算力云大模型/算力云深度学习/微调算力云/蓝耘算力云公司推荐
  • 2025年清洗机厂家最新权威推荐榜:高压清洗机、工业清洗机、超声波清洗机源头厂家综合实力解析
  • 2025年微弧氧化厂家最新推荐排行榜,微弧氧化/铝合金微弧氧化/镁合金微弧氧化/黑色微弧氧化/钛合金微弧氧化/微弧氧化技术加工,渔具/雷达/医疗器械微弧氧化专业供应商