gin与vue通过http+json通信，需解决跨域、响应式更新、静态资源托管三类问题：启用cors中间件、正确赋值响应式数据、配置noroute兜底返回index.html。
直接说结论：Gin 和 Vue 之间不“直接交互”，它们靠 HTTP 请求 + JSON 数据通信，本质是两个独立进程——后端跑 gin.Run()，前端跑 npm run serve 或静态文件服务，中间只认 GET/POST 和 Content-Type: application/json。
为什么 Axios 调不到 /api/user ？跨域被浏览器拦了
Gin 默认不处理跨域，Vue 开发服务器（localhost:5173）发请求到 localhost:8080，浏览器会因同源策略拒绝响应，控制台看到 Blocked by CORS policy 是最常见现象。
- 临时开发用：在 Gin 路由前加一行
c.Header("Access-Control-Allow-Origin", "*")，仅限调试，别上生产 - 正式方案：用 Gin 中间件
github.com/gin-contrib/cors，配白名单域名和允许方法：import "github.com/gin-contrib/cors"<br>r.Use(cors.New(cors.Config{<br> AllowOrigins: []string{"http://localhost:5173", "https://yourdomain.com"},<br> AllowMethods: []string{"GET", "POST", "PUT", "DELETE"},<br> AllowHeaders: []string{"Content-Type", "Authorization"},<br>})) - 注意：Vue 的
axios.create({ baseURL: "http://localhost:8080" })里不能漏写协议和端口，否则请求发到当前页面域名下（比如http://localhost:5173/api/user），根本没走到 Gin
后端返回 {"data":{...}}，但 Vue 里 this.data 拿不到
不是 Gin 问题，是 Vue 响应式失效的典型表现：直接赋值对象属性不会触发更新，比如 this.user = res.data 没问题，但 this.user.name = res.data.name 不会重渲染。
- Gin 返回结构要清晰：用
c.JSON(200, gin.H{"code": 0, "data": user})，避免嵌套过深或字段名含特殊字符（如user-name） - Vue 端接收时别破坏响应式：用
Object.assign(this.user, res.data)或解构赋值this.user = { ...this.user, ...res.data } - 如果
user是 ref()，记得用.value赋值；是 reactive() 就直接解构，别 new Object() 替换整个引用
Vue 编译后 dist 目录怎么让 Gin 当静态资源服务？
Gin 默认不自动托管前端静态文件，r.StaticFS("/static", http.Dir("./dist")) 只服务 /static/xxx.js，但 Vue Router 的 history 模式需要所有未匹配路由都返回 index.html，否则刷新 404。
- 正确做法：先设静态服务，再加兜底路由
r.StaticFS("/assets", http.Dir("./dist/assets"))<br>r.NoRoute(func(c *gin.Context) {<br> if strings.HasPrefix(c.Request.URL.Path, "/assets/") || c.Request.URL.Path == "/favicon.ico" {<br> c.AbortWithStatus(http.StatusNotFound)<br> return<br> }<br> c.File("./dist/index.html")<br>}) - 路径别写错：
./dist是相对 Gin 二进制所在目录，不是main.go所在目录；用os.Getwd()打印确认当前工作路径 - Vue 构建时必须配好
base: "/"（vite.config.ts）或publicPath: "/"（vue.config.js），否则资源路径变成/app/js/xxx.js找不到
真正卡住人的从来不是语法，而是请求发没发出、响应头有没有、JSON 字段名对不对、Vue 实例是否还活着——抓包看 Network，打日志看 Gin 控制台，console.log(res) 别偷懒省掉。
golang免费学习笔记（深入）：立即使用
在学习笔记中，你将探索golang的核心概念和高级技巧！
