导读

曾几何时，大家为了应对跨域八仙过海各显神通，到现在都1202年了，跨域访问早已经有了非常标准的解法了，今天我们来看看在golang中该如何正确的开启跨域之旅。

同源策略

在讲跨域之前，我们简单看一下为什么需要跨域，同源策略(Same-Origin Policy)的要求，本质还是浏览器安全的要求。同源策略最早由浏览器厂商Netscape公司提出，现在已经成为浏览器最基础最核心的安全功能。所谓同源就是域名、协议、端口完全相同，例如http://a.com与https://a.com就不是同源的，因为协议不同。更详细准确的描述可以参考RFC6454。

同源策略带来的影响之一就是ajax请求只能同源，由此引发了众多的跨域请求方案的争奇斗艳。

本文主要讲述CORS方案，其他跨域方案可以参考资料1

注意，下文中跨源和跨域等同，同理同源等同于同域，在参考文档中，不同的文档叫法略有不同。

CORS概述

跨源域资源共享机制允许 Web 应用服务器进行跨源访问控制，从而使跨源数据传输得以安全进行?？缬蜃试垂蚕?Cross-Origin Resource Share 简称CORS)，CORS是一个W3C标准，它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而突破了ajax只能使用同源服务的局限性。

CORS允许服务器声明哪些源站通过浏览器有权限访问哪些资源，并且对于那些对服务器可能产生副作用的HTTP请求，例如POST、DELETE请求等，浏览器必须首先使用OPTIONS方法发起一个预检请求(prelight request)，从而获知服务器是否允许该跨域请求。而且在预检请求的返回中，服务器端也可以通知客户端是否需要携带身份凭证，例如cookie等。

CORS请求失败浏览器会产生错误，但是为了安全，在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。这一点需要额外注意，特别是在定位服务接口的问题时往往只能看到接口报错了，但是却看不到具体的错误信息，如果直接就去排查服务是否有问题就会绕远路浪费时间了。

image-20211009233655326

更全面的介绍可以参考资料2 资料3

CORS实现机制

CORS标准新增了一组HTTP头字段来实现该机制。服务端通过设置相应的头部字段来控制是否允许该次跨域请求，如果服务端没有返回正确的响应头部，则请求方不会收到任何数据。

核心Header介绍

请求Header

响应Header

实战案例

跨域设置在实际工程项目中已经是一个非常普遍的需求了，现在我们看看常用的web框架都提供了什么样的支持呢。

gin

在gin框架中，官方并没有提供一个开箱可用的中间件，一般是由使用者自己定义一个中间件来实现的。

一个简单实现示例如下：

func Cors() gin.HandlerFunc {
   return func(c *gin.Context) {
      method := c.Request.Method
      origin := c.Request.Header.Get("Origin") //请求头部
      if origin != "" {
         // 当Access-Control-Allow-Credentials为true时，将*替换为指定的域名
         c.Header("Access-Control-Allow-Origin", "http://a.com") 
         c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
         c.Header("Access-Control-Allow-Headers", "Origin, X-Requested-With, X-Extra-Header, Content-Type, Accept, Authorization")
         c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Cache-Control, Content-Language, Content-Type")
         c.Header("Access-Control-Allow-Credentials", "true")
         c.Header("Access-Control-Max-Age", "86400") // 可选
         c.Set("content-type", "application/json") // 可选
      }

      if method == "OPTIONS" {
         c.AbortWithStatus(http.StatusNoContent)
      }

      c.Next()
   }
}


func main() {
  r := gin.Default()
  r.Use(Cors()) //开启中间件 允许使用跨域请求
  // 其他路由设置
  r.run()
}

示例代码中并没有对Origin进行更多的逻辑鉴权处理，如果是更复杂的业务场景时，则需要根据实际做更多的逻辑鉴权处理。

虽然gin官方没有提供一个开箱即用的cors包，但是瑕不掩瑜，gin仍然是非常值得学习和使用的高质量高性能的web框架。

另外需要注意的是，上述跨域中间件必须在路由设置之前开启，否则会不生效。

这里留一个小练习，这样设置跨域为什么会不生效。

r := gin.Default()

fileGroup := r.Group("file")
{
    fileGroup.POST("/upload", Upload)
}

r.Use(middlewares.Cors()) // TODO 为什么不生效？

beego

相较于gin，beego提供了更为系统和强大的解决方式，开箱可用的cors包。

先看一下官方提供的示例

import (
        "github.com/beego/beego/v2"
        "github.com/beego/beego/v2/server/web/filter/cors"
)
func main() {
        // CORS for https://foo.* origins, allowing:
        // - PUT and PATCH methods
        // - Origin header
        // - Credentials share
        beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
            AllowOrigins:     []string{"https://*.foo.com"},
            AllowMethods:     []string{"PUT", "PATCH"},
            AllowHeaders:     []string{"Origin"},
            ExposeHeaders:    []string{"Content-Length"},
            AllowCredentials: true,
        }))
        beego.Run()
}

可以看到，beego提供的cors包不仅有完整的封装，更有比较灵活的配置方式，例如Credentials为true时，AllowOrigin也可以使用模糊匹配，这就大大增强了服务端的跨域鉴权能力。

更多的使用方法可以直接通过浏览源官方代码或者文档进行查阅学习。

echo

与beego类似，echo编程框架也提供了官方的cors包，而且也同样提供了丰富强大的配置能力。

使用示例

e := echo.New()
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
  AllowOrigins: []string{"https://a.com", "https://a.net"},
  AllowHeaders: []string{echo.HeaderOrigin, echo.HeaderContentType, echo.HeaderAccept},
}))

更多用法同样可以通过官方代码进行挖掘，或者参考该文档，注意这是v3版本的文档，echo最新已经是v4版本了。

参考资料

1. https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
2. https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
3. https://segmentfault.com/a/1190000017579464

新文章将会第一时间在公众号发布，更多更新文章欢迎订阅【增哥微学堂】