gin解决跨域问题

.番茄炒蛋

已于 2022-06-11 17:48:38 修改

阅读量6.1k

点赞数 7

分类专栏： Go学习 Gin学习文章标签： cros gin 跨域

于 2022-06-11 17:21:24 首次发布

本文链接：https://blog.csdn.net/qq_43135259/article/details/125236412

版权

Go学习同时被 2 个专栏收录

58 篇文章 6 订阅

订阅专栏

Gin学习

15 篇文章 4 订阅

订阅专栏

为什么会出现跨域问题

再非简单请求且跨域的情况下,浏览器会发送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 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)
		}
	}
}