当前位置:首页 > 技术分析 > 正文内容

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

ruisui885个月前 (01-15)技术分析43

什么是跨域?

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

跨域的现象

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



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'



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

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/321.html

分享给朋友:

“「go商城」gin+vue跨域问题” 的相关文章

JavaScript数组操作:掌握常用方法,提升开发效率

JavaScript数组操作:从增删改查到高级应用本文深入解析JavaScript中常用的数组方法,包括push、unshift、pop、shift、map、filter、reverse、at 和 slice。通过详细的例子和应用场景,帮助开发者快速掌握这些方法,提升代码效率和可读性。开篇点题作为J...

Python中的11 种数组算法

1. 创建数组 创建数组意味着留出一个连续的内存块来存储相同类型的元素。在大多数语言中,您可以在创建数组时指定数组的大小。假设您正在书架上整理一组书籍,并且您需要为正好 10 本书预留空间。功能架上的每个空间都对应于数组中的一个索引。# Example in Python arr = [1, 2,...

企业微信自建应用和消息发送配置对接系统指南

本文介绍企业微信应用创建、消息提醒、自动回复、自定义菜单和服务端接口对接过程。企业微信登录:https://work.weixin.qq.com/企业微信接口对接,应用授权和发送消息代码:https://www.easywechat.com/docs/5.x/wework/oauth一、创建自建应用...

uni-app开发微信小程序和h5应用

#头条创作挑战赛#本文同步本人掘金平台的文章:https://juejin.cn/post/6986465633114259469最近,有个需求需要开发H5应用和微信小程序。如果针对不同的平台开发自己的一套代码,那将是一件很糟糕的事情:如果下次需要兼容支付宝小程序、快应用,那工作量随着平台的添加而...

并列双缸之同步和异步

并列双缸引擎,分为同步双缸和异步双缸1 并列同步引擎即?360°曲轴?相位?,就是将一个大的缸体,分为两个小的缸体。并且它们的活塞是同上同下运行的,虽然它们的机械结构保持了一致,但他们并不是真正意义上的同步工作,因为?它们?是?异步?点火?的?,例如,如果A缸正在点火,那么B缸就处于停功状态。理论上...

「网络」异常网络RST包出现的原因分析

有以下情况会发送RST包1.connect一个不存在的端口;2.向一个已经关掉的连接send数据;3.向一个已经崩溃的对端发送数据(连接之前已经被建立);4.close(sockfd)时,直接丢弃接收缓冲区未读取的数据,并给对方发一个RST。这个是由SO_LINGER选项来控制的;5.a重启,收到b...