当前位置：首页 > news >正文

做网站郑州公司福州网站制作费用

news 2025/9/18 5:06:16

做网站郑州公司,福州网站制作费用,网站权重怎么做,公众号商城开发需要多少钱Gin 框架解决跨域问题一点废话在学习 Axios 的时候发现 up 使用了一个网址来提供 json 数据。因为不想加什么公众号搞啥百度网盘的，然后又刚好会一点点 go，就想着自己用 gin 框架返回一个 json 到前端页面然后从这个页面获取 json 。这是我的go代码…

Gin 框架解决跨域问题

一点废话

在学习 Axios 的时候发现 up 使用了一个网址来提供 json 数据。因为不想加什么公众号搞啥百度网盘的，然后又刚好会一点点 go，就想着自己用 gin 框架返回一个 json 到前端页面然后从这个页面获取 json 。

这是我的go代码:

package mainimport ("github.com/gin-gonic/gin"
)func main() {r := gin.Default()r.GET("/test", func(c *gin.Context) {c.JSON(200, gin.H{"id":    "1","name":  "feixin","major": "big data","old":   "20",})})err := r.Run()if err != nil {panic(err)}
}

初学者写的比较low，高手勿喷🥹🥹🥹
下面是我的 html 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="../js/axios.js"></script></head><body><input type="button" value="GET" onclick="get()"><input type="button" value="POST" onclick="post()">
</body>
<script>function get() {axios({method: "get",url: "http://localhost:8080/test"}).then((result) => {console.log(result.data);})}function post() {}
</script></html>

很简单的基本操作，go 这边实现了 http://localhost:8080/test 的json数据，然后 axios 这边从 origin http://127.0.0.1:5500/web/html/test.html 向前者获取 json 数据并打印在 console 中。

运行之后发现出现如下错误：
在这里插入图片描述
bing 之后发现是跨域问题。

这里就不介绍跨域问题了，贴一个佬的讲解。你还不知道跨域问题是怎样造成的吗？

解决方法

反正就大概懂了这个请求我是发成功了，但是因为是 XHR 出现跨域问题被拦截了，看了这个佬
—传送门— 的文章之后，知道了在 gin 中可以使用中间件来解决这个问题。我的解决步骤如下：

首先定义一个middlerwares包，新建 go file，任意取名。
写入以下代码：

package middlewaresimport ("github.com/gin-gonic/gin""net/http"
)func Cors() gin.HandlerFunc {return func(c *gin.Context) {method := c.Request.Methodorigin := c.Request.Header.Get("Origin")if origin != "" {c.Header("Access-Control-Allow-Origin", "http://127.0.0.1:5500") // 写入origin的地址，例如我这边是这个c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")c.Header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization")c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Cache-Control, Content-Language, Content-Type")c.Header("Access-Control-Allow-Credentials", "true")}if method == "OPTIONS" {c.AbortWithStatus(http.StatusNoContent)}c.Next()}
}

然后修改go 代码为：

package mainimport ("github.com/gin-gonic/gin"middlewares "test.com/helloworld/middlerwares" //多导了这个
)func main() {r := gin.Default()r.Use(middlewares.Cors()) // 多加了这一句r.GET("/test", func(c *gin.Context) {c.JSON(200, gin.H{"id":    "1","name":  "feixin","major": "big data","old":   "20",})})err := r.Run()if err != nil {panic(err)}
}