当前位置：网站首页>Gin solves cross domain problems

Gin solves cross domain problems

2022-06-11 23:59:00 【. fried eggs with tomatoes】

Why cross domain problems arise

It is no longer a simple request and cross domain , The browser will send OPTIONS Pre inspection request .
Preflighted Requests yes CORS A transparent server authentication mechanism in . The pre check request first needs to send a HTTP OPTIONS Request header , The purpose is to judge whether the actually sent request is secure .

A simple request

A simple request needs to satisfy the following two conditions

The request method is one of three
- HEAD
- GET
- POST
HTTP The header information of does not exceed the following fields
- Accept
- Accept Language
- Last-Event-ID
- Content-Type: Limited to (application/x-www-form-urlencoded,multipart/form-data,text/plain)

Complex request

Non simple requests are complex requests
Common complex requests are :

The request method is PUT or DELETE
Content-Type Field type is application/json
Add off core http header

In the case of cross domain , Non simple requests will be initiated once body Of OPTIONS request , be called " preview " request , Used to request permission information from the server , After the pre inspection request is successfully responded , Will launch a real http request .
The pre check request result of the browser can be passed through Access-Control-Max-Age Cache

Problem recurrence

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"> Request data </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(" Request error ") } } ); }); </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")
}

Insert picture description here

Insert picture description here
Two times in total /ping request , One return CORS error, once GET The request becomes OPTIONS request , As a result of 404.
The current request is mainly because the front-end re 63342 port , Back end re 8080 Ports form cross domain , also Content-Type Field type is application/json Cross domain problems caused by non simple requests

Solution

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)
		}
	}
}