Go 框架 Gin 怎么实现允许前端跨域请求?

简介: Go 框架 Gin 怎么实现允许前端跨域请求?

介绍

在前后端分离的项目中,前端在请求服务端提供的接口时,往往会遇到跨域请求的问题,服务端可以通过 CORS 的方式解决,限于篇幅,关于跨域和 CORS 的详细介绍,读者朋友们可以自行查阅相关资料。

Go 框架 Gin 官方提供了 CORS 中间件,可以很方便地实现使用 CORS 解决跨域问题,本文我们介绍该 Gin 中间件的使用方式。

使用方式

在介绍 Gin 中间件 CORS 的使用方式之前,我们需要先使用命令安装该中间件,go get github.com/gin-contrib/cors

在 Go 框架 Gin 中使用 CORS 中间件非常简单,只需使用 Use 方法,将中间件绑定到路由中。

CORS 中间件提供三个函数,代表三种使用方式,分别是 NewDefaultConfigDefault

其中 New 函数,可以接收 CORS 中间件的配置项,可通过自定义配置项,满足任意需要跨域的场景。

示例代码:

...
router.Use(cors.New(cors.Config{
    AllowOrigins:     []string{"https://foo.com"},
    AllowMethods:     []string{"PUT", "PATCH"},
    AllowHeaders:     []string{"Origin"},
    ExposeHeaders:    []string{"Content-Length"},
    AllowCredentials: true,
    AllowOriginFunc: func(origin string) bool {
      return origin == "https://github.com"
    },
    MaxAge: 12 * time.Hour,
  }))
...

阅读上面这段代码,使用 New 函数接收配置项,返回一个用户自定义的 CORS 中间件,绑定到路由中。

CORS 中间件的配置项说明:

  • AllowAllOrigins bool 允许所有请求源。
  • AllowOrigins []string 指定允许请求源的列表,如果列表中存在 *,则允许所有请求源,默认值是 []
  • AllowOriginFunc func(origin string) bool 接收参数 origin,函数体中的验证逻辑返回是否允许跨域请求。该配置项优先级高于 AllowOrigins []string,如果设置该配置项,AllowOrigins []string 配置项的设置被忽略。
  • AllowMethods []string 允许的请求方式,默认值是 GETPOSTPUTPATCHDELETEHEAD,和 OPTIONS
  • AllowHeaders []string 用在对预请求的响应中,指示实际的请求中可以使用哪些 HTTP 请求头。
  • AllowCredentials bool 表示请求附带请求凭据时是否响应请求,例如 cookieHTTP authentication 或客户端 SSL 证书。
  • ExposeHeaders []string 可以在响应中显示的请求头。
  • MaxAge time.Duration 指示预请求的结果能被缓存多久。
  • AllowWildcard bool 添加请求源是否允许使用通配符,例如 http://some-domain/*https://api.http://some.*.subdomain.com
  • AllowBrowserExtensions bool 允许使用常用的浏览器的扩展模式。
  • AllowWebSockets bool 允许使用 WebSocket 协议。
  • AllowFiles bool 允许使用 file:// 协议。

DefaultConfig 方式

DefaultConfig 方式就是默认设置一些通用配置项,我们可以直接使用,也可以在此基础上添加我们需要的其他配置项。

func DefaultConfig() Config {
 return Config{
  AllowMethods:     []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"},
  AllowHeaders:     []string{"Origin", "Content-Length", "Content-Type"},
  AllowCredentials: false,
  MaxAge:           12 * time.Hour,
 }
}

阅读上面这段代码,我们可以发现 DefaultConfig 方式,默认设置了允许的请求方式、允许的请求头、附带请求凭据时是否响应请求和预请求结果的缓存时间。

Default 方式就是在 DefaultConfig 方式的基础上,设置 AllowAllOrigins 选项为 true,因为 DefaultConfig 方式默认不允许任意请求源,所以需要单独设置 AllowAllOrigins 选项为 true

func Default() gin.HandlerFunc {
 config := DefaultConfig()
 config.AllowAllOrigins = true
 return New(config)
}

03

总结

本文我们介绍了 Go 语言框架 Gin 的中间件 CORS,该中间件提供了三种使用方式,我们可以按照实际开发需求选择合适的使用方式。

感兴趣的读者朋友们可以阅读该中间件的源码,重点熟悉每个配置项的作用。

推荐阅读:

参考资料:

  1. https://github.com/gin-contrib/cors
  2. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
目录
相关文章
|
15天前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
22天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
62 41
|
1天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
17 8
|
7天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
21 3
|
13天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
13天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
14天前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
|
19天前
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
57 1
|
14天前
|
前端开发 JavaScript API
前端的全栈之路Meteor篇(完):关于前后端分离及与各框架的对比,浅析分离之下的潜在耦合
本文探讨了Meteor.js这一全栈JavaScript框架的特点与优势,特别是在前后端分离架构中的应用。Meteor通过共享数据结构和简化全栈开发流程,实现了前后端的紧密协作。文章还对比了其他全栈框架,如Next.js、Nuxt.js等,分析了各自的优势与适用场景,最后讨论了通过定义文档归属者和用户专有数据集简化后端构建及端云数据同步的方法。
|
22天前
|
缓存 前端开发 JavaScript
探索现代前端开发:从框架选择到最佳实践
【10月更文挑战第11天】探索现代前端开发:从框架选择到最佳实践
31 0