为什么会出现跨域问题
再非简单请求且跨域的情况下,浏览器会发送OPTIONS预检请求.
Preflighted Requests是CORS中一种透明服务器验证机制.预检请求首先需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,其目的就是为了判断实际发送的请求是安全的.
简单请求
简单请求需满足以下两个条件
- 请求方法是以下三种方法之一
- HEAD
- GET
- POST
- HTTP的头信息不超出以下几种字段
- Accept
- Accept Language
- Last-Event-ID
- Content-Type:只限于(application/x-www-form-urlencoded,multipart/form-data,text/plain)
复杂请求
非简单请求即是复杂请求
常见的复杂请求有:
- 请求方法为PUT或DELETE
- Content-Type字段类型为 application/json
- 添加核外的http header
再跨域的情况下,非简单请求会先发起一次空body的OPTIONS请求,称为"预检"请求,用于向服务器请求权限信息,等预检请求被成功响应后,才会发起真正的http请求.
浏览器的预检请求结果可以通过Access-Control-Max-Age进行缓存
问题复现
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body><button type="button" id="query">请求数据</button><div id="content" style=" width: 300px;height: 500px"></div>
</body>
<script type="text/javascript">$("#query").click(function () {$.ajax({url:"http://127.0.0.1:8080/ping",dataType: "json",type: "get",contentType:"application/json;charset=utf-8",success: function (result) {console.log(result.message);$("#content").text(result.message)},error: function (data) {alert("请求出错")}});});
</script>
</html>
main.go
package mainimport ("github.com/gin-gonic/gin"
)func main() {r := gin.Default()r.GET("/ping", func(c *gin.Context) {c.JSON(200, gin.H{"message": "pong",})})r.Run() // listen and serve on 0.0.0.0:8080 (for windows "localhost:8080")
}
一共发了两次/ping请求,一次返回CORS error,一次GET请求变成了OPTIONS请求,导致的404.
当前请求主要是因为前端再63342端口,后端再8080端口形成跨域,并且Content-Type字段类型为 application/json为非简单请求造成的跨域问题
解决方案
package mainimport ("github.com/gin-gonic/gin""net/http"
)func main() {r := gin.Default()r.Use(Cors())r.GET("/ping", func(c *gin.Context) {c.JSON(200, gin.H{"message": "pong",})})r.Run() // listen and serve on 0.0.0.0:8080 (for windows "localhost:8080")
}func Cors() gin.HandlerFunc {return func(context *gin.Context) {method := context.Request.Methodcontext.Header("Access-Control-Allow-Origin", "*")context.Header("Access-Control-Allow-Headers", "Content-Type,AccessToken,X-CSRF-Token, Authorization, Token, x-token")context.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PATCH, PUT")context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")context.Header("Access-Control-Allow-Credentials", "true")if method == "OPTIONS" {context.AbortWithStatus(http.StatusNoContent)}}
}
