陵水网站设计公司,行业网站建站青岛公司,前端低代码开发平台,网站开发业务流程Gin 框架解决跨域问题
一点废话
在学习 Axios 的时候发现 up 使用了一个网址来提供 json 数据。因为不想加什么公众号搞啥百度网盘的#xff0c;然后又刚好会一点点 go#xff0c;就想着自己用 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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/titlescript src../js/axios.js/script/headbodyinput typebutton valueGET onclickget()input typebutton valuePOST onclickpost()
/body
scriptfunction 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/ginnet/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/ginmiddlewares 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)}
} 运行go程序并重新执行 html 代码 点击 GET 成功拿到数据 总结
在javaweb 用 go 语言也是逆天但是还没有学 springboot 呜呜呜springboot应该也可以实现类似的操作。总之就是 XHR 产生跨域问题 被目标地址 block了我们在服务端对 origin 开放一下就可以了。
