gin解决跨域问题
为什么会出现跨域问题
再非简单请求且跨域的情况下,浏览器会发送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>Titletitle>
<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 main
import (
"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 main
import (
"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.Method
context.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)
}
}
}
