您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

gin+vue跨域问题

时间:2022-06-30 10:25:04  来源:  作者:大佬喝可乐

什么是跨域?

浏览器有一个安全机制叫同源策略。
同源就是指协议、域名、端口都一样,如果任意一项不一致就是不同源。简单点说就是,你的网页URL和你调用的接口URL不是一个地方的,浏览器觉得有安全风险,不想让你使用这个接口的数据。

跨域的现象

当我们在本地启动前、后端代码进行调试时,如果使用postman等类似的工具进行调试时,接口是可以请求的,但是在浏览器调用相同的请求会失败。
这是因为使用工具调用接口只是简单的访问一个资源,并不存在资源的相互访问。而使用web则触发了同源策略的保护机制。

「go商城」gin+vue跨域问题

 


「go商城」gin+vue跨域问题

 

gin处理跨域

我们在gin的拦截器中定义允许跨域请求,同时需要在注册url的时候使用这个拦截器的方法

// 跨域
Router.Use(middleware.Cors()) // 如需跨域可以打开

// 处理跨域请求,支持options访问
func Cors() gin.HandlerFunc {
    return func(c *gin.Context) {
        method := c.Request.Method
        origin := c.Request.Header.Get("Origin")
        c.Header("Access-Control-Allow-Origin", origin)
        c.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token,X-Token,X-User-Id")
        c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT")
        c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
        c.Header("Access-Control-Allow-Credentials", "true")

        // 放行所有OPTIONS方法
        if method == "OPTIONS" {
            c.AbortWithStatus(http.StatusNoContent)
        }
        // 处理请求
        c.Next()
    }
}

到这里就结束了嘛?
如果你的拦截器方法中定义了你前段请求携带的所有信息的话,那么请求就能成功。
但是我使用的newbee商城现成的前端,其前端代码中携带了这样一条请求头的键值对

axIOS.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'

「go商城」gin+vue跨域问题

 


如果不加上这个请求头的话,通过web请求接口依然会失败。
在你的项目中如果也遇到了类似的问题,可以检查一下你前后端定义的请求头是否一致。

所有代码已上传Github,有兴趣的可以访问
https://github.com/newbee-ltd/newbee-mall-api-go/,如果有更好的建议也欢迎提交issure,pr



Tags:跨域   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
什么是跨域请求?
跨域请求是指在Web开发中,当一个Web页面(或脚本)向不同源的服务器发起请求时,浏览器会根据同源策略(Same-Origin Policy)对这些请求进行限制。同源策略是一种安全机制,它规定了来自...【详细内容】
2023-12-27  Search: 跨域  点击:(116)  评论:(0)  加入收藏
通过实例理解Web应用跨域问题
在开发Web应用的过程中,我们经常会遇到所谓“跨域问题(Cross Origin Problem)”。跨域问题是由于浏览器的同源策略(Same-origin policy)[1]导致的,它限制了不同源(Origin:域名...【详细内容】
2023-11-20  Search: 跨域  点击:(164)  评论:(0)  加入收藏
解析Java中的跨域请求问题与解决方案
在现代 Web 开发中,由于浏览器的同源策略限制,跨域请求成为一个常见的挑战。Java 作为一种常用的后端语言,提供了多种解决跨域请求问题的方案。下面将深入探讨 Java 中的跨域请...【详细内容】
2023-11-17  Search: 跨域  点击:(235)  评论:(0)  加入收藏
跨域资源共享(CORS)在Spring Boot中的实现
随着Web应用程序的普及,跨域资源共享(CORS)已成为前端开发的重要组成部分。当一个Web应用程序需要从另一个域的前端页面发出请求时,就会遇到跨域问题。大多数现代浏览器由于安全...【详细内容】
2023-09-28  Search: 跨域  点击:(228)  评论:(0)  加入收藏
前端 Jsonp 跨域方案原理
JSONP(JSON with Padding)是一种常用的跨域数据请求策略,它的基本原理是利用 <script> 标签的 src 属性没有同源策略限制的特性来达到跨域的目的。我们来详细解析 JSONP 的工作...【详细内容】
2023-06-01  Search: 跨域  点击:(230)  评论:(0)  加入收藏
SpringBoot如何跨域配置?
1. 前言跨域,一个老生常谈的话题,不管前端后端,跨域都会遇到。而今天,我就跟大家分享一篇关于【跨域】的文章,希望能给大家带来点不一样的收获。2. 环境说明js复制代码环境说明:Wi...【详细内容】
2023-05-30  Search: 跨域  点击:(142)  评论:(0)  加入收藏
细解跨域以及跨域的解决方案
跨域,对于正在学习或者已经就业的前端同学而言,就是老朋友。只要涉及“请求”“前后端交互”“开发阶段”等关键字,都避不开跨域。同时它也是面试中最常出现的考点之一,面试官可...【详细内容】
2023-05-06  Search: 跨域  点击:(427)  评论:(0)  加入收藏
什么是跨域以及如何解决?通俗易懂带你彻底搞定
现在的web项目,很多都是前后端分离,特别容易出现跨域问题那么什么是跨域问题呢?本篇文章带你彻底从本质上弄明白什么是跨域问题以及如何解决一 跨域有什么现象?我们先看一下现象...【详细内容】
2022-10-19  Search: 跨域  点击:(486)  评论:(0)  加入收藏
前后端分离开发,Vue 如何处理跨域问题?
Spring Boot + Vue 这一对技术栈目前看来可以说是非常的火热,关于 Spring Boot 松哥已经写过多篇教程,公号后台回复 666 可以获取 PDF 链接。前后端分离的文章也写过好几篇了,...【详细内容】
2022-09-06  Search: 跨域  点击:(333)  评论:(0)  加入收藏
Cors 跨域基本原理
为什么有了跨域这个东西世上本没有路,走的人多了也就有了路。 跨域这算是这么一回事。 在 Web 的世界上本没有跨域这个东西,但架不住坏人越来越多,所以后来就有了跨域。何出此...【详细内容】
2022-08-09  Search: 跨域  点击:(340)  评论:(0)  加入收藏
▌简易百科推荐
Meta如何将缓存一致性提高到99.99999999%
介绍缓存是一种强大的技术,广泛应用于计算机系统的各个方面,从硬件缓存到操作系统、网络浏览器,尤其是后端开发。对于Meta这样的公司来说,缓存尤为重要,因为它有助于减少延迟、扩...【详细内容】
2024-04-15    dbaplus社群  Tags:Meta   点击:(3)  评论:(0)  加入收藏
SELECT COUNT(*) 会造成全表扫描?回去等通知吧
前言SELECT COUNT(*)会不会导致全表扫描引起慢查询呢?SELECT COUNT(*) FROM SomeTable网上有一种说法,针对无 where_clause 的 COUNT(*),MySQL 是有优化的,优化器会选择成本最小...【详细内容】
2024-04-11  dbaplus社群    Tags:SELECT   点击:(3)  评论:(0)  加入收藏
10年架构师感悟:从问题出发,而非技术
这些感悟并非来自于具体的技术实现,而是关于我在架构设计和实施过程中所体会到的一些软性经验和领悟。我希望通过这些分享,能够激发大家对于架构设计和技术实践的思考,帮助大家...【详细内容】
2024-04-11  dbaplus社群    Tags:架构师   点击:(2)  评论:(0)  加入收藏
Netflix 是如何管理 2.38 亿会员的
作者 | Surabhi Diwan译者 | 明知山策划 | TinaNetflix 高级软件工程师 Surabhi Diwan 在 2023 年旧金山 QCon 大会上发表了题为管理 Netflix 的 2.38 亿会员 的演讲。她在...【详细内容】
2024-04-08    InfoQ  Tags:Netflix   点击:(5)  评论:(0)  加入收藏
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(9)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(16)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(14)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(9)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(14)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(10)  评论:(0)  加入收藏
站内最新
站内热门
站内头条