Golang Gin框架部署二级目录打包的Vue前端项目小记

发布于:2024-07-27 ⋅ 阅读:(43) ⋅ 点赞:(0)

概述

因为最近在公司开发项目遇到一个需求 - 我们自己开发的B/S系统(以下简称:二级系统)作为二级子系统嵌入到三方企业的主系统,界面入口是主系统。经过一番折腾,成功实现,故而博文记录,用以备忘

可行方案

针对上述需求,有以下几个方案能实现

  1. 二级系统独立部署,主系统的Nginx通过二级目录匹配将所有请求转发到二级系统
  2. 二级系统独立部署,主系统通过普通URL跳转,直接跳转到二级系统界面
  3. 二级系统后端功能独立部署,提供前端发布包给主系统做整合,主系统的Nginx通过二级目录匹配将二级系统的API请求转发到二级系统

方案1
优点:独立部署,侵入性比较低,灵活性比较好(方便更新),URL统一
缺点:初期需要和主系统进行联调确定Nginx配置

方案2
优点:独立部署,侵入性最低,灵活性最好(方便更新)
缺点:URL无法统一

方案3
优点:URL统一
缺点:侵入性高,灵活性极低(每次前端更新都得提交主系统,至于主系统人员配不配合,那就自求多福了)

为了保证独立性,加上甲方有URL统一的要求,我们各方权衡后选择了方案1。

遗留问题

方案1虽然能成功完成二级系统嵌入,但是也遗留下一个问题:当跳过Nginx代理,直接访问二级系统的URL,因为资源路径不对导致页面白屏不展示。

问题根源

因为入口都是在主系统,二级系统的资源加载以及API请求都必须带上二级目录,原本URL是/api/test,嵌入后调整的URL是/XXXXX/api/test,这导致直接访问二级系统的URL就会导致路径匹配不上,该问题在静态资源以及API接口都有

解决方案

利用中间件匹配判断URL,将带二级目录的请求,通过307或者308重定向到没有二级目录的API请求。

注意:
用301或者302会导致浏览器修改URL请求的方法(从POST改成GET)

代码

func RedirectMiddleware() gin.HandlerFunc {
	return func(c *gin.Context) {
		if strings.HasPrefix(c.Request.URL.Path, "/xxxxx") {
			c.GetRawData() //先将数据收完,然后再发起重定向,避免因为请求数据还在传输过程中就返回重定向请求,从而导致重定向失效
			realPath := strings.ReplaceAll(c.Request.URL.Path, "/xxxxx", "")
			c.Redirect(http.StatusTemporaryRedirect, realPath)
			c.Abort()
		}

		c.Next()
	}
}

func main() {
	r := gin.New() 
	...
	r.Use(RedirectMiddleware())
	...
	r.Run(":8080")
}

Q&A

Q:在测试的过程中,发现项目部分功能失效,一通排查,发现是失效的功能都是因为POST请求的数据太大(上传的内容有15M多),而后端返回重定向太快,导致axios直接忽略了重定向请求,从而引发网络错误。
A:在重定向中间件添加读取请求内容的代码,这样可以避免该问题出现

为啥确定是axios直接忽略了重定向请求?经过Fidder和Wireshark抓包发现,出问题的时候,服务器端有返回重定向请求。

参考链接

【冷门知识】你知道http状态码301和308,302和307的区别吗?
golang gin单独部署vue3.0前后端分离应用