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

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

ruisui884个月前 (01-15)技术分析21

什么是跨域?

浏览器有一个安全机制叫同源策略。
同源就是指协议、域名、端口都一样,如果任意一项不一致就是不同源。简单点说就是,你的网页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跨域问题” 的相关文章

Vue3 中有哪些值得深究的知识点?

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,有很大的区别,具体对比如下://Vue 2 Vue.use({ router, store,...

gitlab 分支保护设置

一、功能描述代码管理中管理,我们把稳定的分支设置为保护,可以防止其他人员误操作(例如删除,合并,推送代码等)。二、Gitlab配置步骤1 点击项目Repository标签2.点击Expand标签3.配置如下:默认master是被保护的,而且只有维护人员具有推送和合并权限。设置保护分支,这里的beta...

学无止境:Git 如何优雅地回退代码

来源:https://zhenbianshu.github.io前言从接触编程就开始使用 Git 进行代码管理,先是自己玩 Github,又在工作中使用 Gitlab,虽然使用时间挺长,可是也只进行一些常用操作,如推拉代码、提交、合并等,更复杂的操作没有使用过,看过的教程也逐渐淡忘了,有些对不起 L...

Git 分支管理策略汇总

最近,团队新入职了一些小伙伴,在开发过程中,他们问我 Git 分支是如何管理的,以及应该怎么提交代码?我大概说了一些规则,但仔细想来,好像也并没有形成一个清晰规范的流程。所以查了一些资料,总结出下面这篇文章,一共包含四种常见的分支管理策略,分享给大家。Git flow在这种模式下,主要维护了两类分支...

我的VIM配置

写一篇关于VIM配置的文章,记录下自己的VIM配置,力求简洁实用。VIM的配置保存在文件~/.vimrc中(Windows下是C:\Users\yourname \_vimrc)。VIM除了自身可配置项外,还可插件扩展。VIM的插件一般用vundle或vim-plug来管理,但我力求简单,不打算装太...

三维家-系统快捷键使用

快键件使用:通过简单的键盘+鼠标操作,快速完成搭配。1.基础快捷键1) Ctrl+V:复制选中对象第一步:鼠标左击物体,按下Ctrl+V 即可复制选中对象。2) Ctrl+G:组合多选对象第一步:按住Ctrl键多选对象--按住Ctrl+G--确定。3) Ctrl+B:解组选中对象第一步:左击选中对象...