前言
跨域产生的原因是是a页面想要获取b页面资源，如果a,b页面的协议、域名、端口号、子域名不同，所进行的访问都是跨域的，而浏览器一般为了安全都限制了跨域访问，也就是不允许跨域访问资源。
解决方案
服务端支持跨域请求
- 获取请求的域名和请求方法
method := c.Request.Method //请求方法
origin := c.Request.Header.Get("Origin") //请求头部
- 指定可跨域请求的域名
//判断origin是否允许跨域请求
var isExist bool
if len(config.App.CorsDomains) > 0 {
for _, val := range config.App.CorsDomains {
if val == origin {
isExist = true
}
}
}
config.App.CorsDomains 是我配置中的切片类型
- 设置header
c.Header("Access-Control-Allow-Origin", origin) // 这是允许访问的域
c.Header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS") //服务器支持的所有跨域请求的方法,为了避免浏览次请求的多次'预检'请求
//header的类型
c.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma")
//允许跨域设置 可以返回其他子段
c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar") // 跨域关键设置 让浏览器可以解析
c.Header("Access-Control-Allow-Credentials", "false")
-
放行所有的OPTIONS请求方法
跨域请求中，options请求是浏览器自发起的preflight request(预检请求)，以检测实际请求是否可以被浏览器接受。
preflight request请求报文中有两个需要关注的首部字段：
（1）Access-Control-Request-Method：告知服务器实际请求所使用的HTTP方法；
（2）Access-Control-Request-Headers：告知服务器实际请求所携带的自定义首部字段。
同时服务器也会添加origin header,告知服务器实际请求的客户端的地址。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。
服务器所返回的Access-Control-Allow-Methods首部字段将所有允许的请求方法告知客户端，返回将所有Access-Control-Request-Headers首部字段将所有允许的自定义首部字段告知客户端。此外，服务器端可返回Access-Control-Max-Age首部字段，允许浏览器在指定时间内，无需再发送预检请求，直接用本次结果即可。
在我们开发过程中出现的浏览器自发起的options请求就是上面的第二种情况。实际上，跨域请求中的”复杂请求”发出前会进行一次方法是options的preflight request。
//放行所有OPTIONS方法
if method == "OPTIONS" {
// c.JSON(http.StatusNoContent, "Options Request!") //option请求不能返回body体
c.AbortWithStatus(http.StatusNoContent)
}
完整代码
我使用的是gin框架，在middleware 增加如下方法
func Cors() gin.HandlerFunc {
return func(c *gin.Context) {
method := c.Request.Method //请求方法
origin := c.Request.Header.Get("Origin") //请求头部
//判断origin是否允许跨域请求
var isExist bool
if len(config.App.CorsDomains) > 0 {
for _, val := range config.App.CorsDomains {
if val == origin {
isExist = true
}
}
}
if isExist {
c.Header("Access-Control-Allow-Origin", origin) // 这是允许访问的域
c.Header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,PATCH,OPTIONS") //服务器支持的所有跨域请求的方法,为了避免浏览次请求的多次'预检'请求
//header的类型
c.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma")
//允许跨域设置 可以返回其他子段
c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar") // 跨域关键设置 让浏览器可以解析
c.Header("Access-Control-Allow-Credentials", "false") // 跨域请求是否需要带cookie信息 默认设置为true
}
//放行所有OPTIONS方法
if method == "OPTIONS" {
c.JSON(http.StatusNoContent, "Options Request!")
}
// 处理请求
c.Next() // 处理请求
}
}
最后在route 调用中间件来实现
r := gin.New()
r.Use(middleware.Cors())
