本文将以 Go 语言后端 为例，详细介绍：
-
Go 后端接口如何设计
-
接口的请求 / 响应结构
-
前端如何用 HTML + JS 调用 Go 接口
-
前端如何用 Vue 工程模式 调用 Go 接口
-
两种方式的区别与适用场景
一、整体架构说明
前后端分离架构
浏览器
|
| HTTP 请求（JSON）
↓
前端（HTML / Vue）
|
| HTTP 请求
↓
Go 后端（API）
|
| JSON 响应
↓
前端渲染页面
-
前端：负责 页面 + 交互
-
后端（Go）：负责 业务逻辑 + 数据处理
-
通信方式：HTTP + JSON
二、Go 后端接口准备
先准备一个最简单但标准的 Go 接口，方便前端调用。
一个示例接口：用户登录
接口信息
| URL | /user/login |
| 方法 | POST |
| 请求类型 | application/json |
| 返回类型 | application/json |
Go 后端代码示例
package main
import (
"encoding/json"
"net/http"
)
type LoginRequest struct {
Username string `json:"username"`
Password string `json:"password"`
}
type Response struct {
Code int `json:"code"`
Msg string `json:"msg"`
Data interface{} `json:"data,omitempty"`
}
func login(w http.ResponseWriter, r *http.Request) {
// 只允许 POST
if r.Method != http.MethodPost {
w.WriteHeader(http.StatusMethodNotAllowed)
return
}
var req LoginRequest
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
json.NewEncoder(w).Encode(Response{
Code: 400,
Msg: "参数错误",
})
return
}
// 模拟校验
if req.Username == "admin" && req.Password == "123456" {
json.NewEncoder(w).Encode(Response{
Code: 200,
Msg: "登录成功",
Data: map[string]string{
"token": "mock-token-123",
},
})
return
}
json.NewEncoder(w).Encode(Response{
Code: 401,
Msg: "用户名或密码错误",
})
}
func main() {
http.HandleFunc("/user/login", login)
http.ListenAndServe(":8080", nil)
}
启动后端后，接口地址为：
http://localhost:8080/user/login
三、HTML + JavaScript 调用 Go 接口
这是最原始、最直观的方式，非常适合：
-
学习 HTTP 请求本质
-
不使用前端框架的简单项目
-
理解 fetch / axios 的底层思想
1. HTML 页面结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<div>
<input type="text" id="username" placeholder="用户名">
</div>
<div>
<input type="password" id="password" placeholder="密码">
</div>
<button type="submit">登录</button>
</form>
<script src="login.js"></script>
</body>
</html>
2. JavaScript 调用 Go 接口
const form = document.getElementById('loginForm');
form.addEventListener('submit', async function (e) {
e.preventDefault(); // 阻止表单刷新页面
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
try {
const res = await fetch('http://localhost:8080/user/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username,
password
})
});
const data = await res.json();
if (data.code === 200) {
alert('登录成功，token：' + data.data.token);
} else {
alert(data.msg);
}
} catch (err) {
console.error(err);
alert('请求失败');
}
});
3.代码流程
监听表单提交
阻止浏览器默认刷新
获取输入框数据
使用 fetch 发送 HTTP 请求
请求体转成 JSON
解析 Go 返回的 JSON
根据 code 判断成功或失败
4. HTML + JS 的特点
✅ 优点：
-
简单直接
-
学习成本低
-
无需工程化
❌ 缺点：
-
代码容易混乱
-
不适合复杂项目
-
不利于组件复用
四、Vue 工程模式调用 Go 接口
这是实际开发中最常用的方式。
1、Vue 项目基本结构
使用 Vite 创建 Vue 项目后，常见结构：
src/
├── api/ # 所有接口请求
│ └── user.js
├── views/ # 页面
│ └── Login.vue
├── main.js
2、Vue 中封装 API 请求
安装 axios
npm install axios
3. 创建 axios 实例（src/api/request.js）
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8080',
timeout: 5000
})
export default request
4. 用户接口封装（src/api/user.js）
import request from './request'
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}
5、Vue 页面中调用 Go 接口
Login.vue
<template>
<div>
<h2>用户登录</h2>
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button @click="handleLogin">登录</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { login } from '@/api/user'
const username = ref('')
const password = ref('')
const handleLogin = async () => {
try {
const res = await login({
username: username.value,
password: password.value
})
if (res.data.code === 200) {
alert('登录成功')
console.log(res.data.data.token)
} else {
alert(res.data.msg)
}
} catch (err) {
alert('请求失败')
}
}
</script>
五、Vue 调用流程总结
页面触发点击事件
调用封装好的 API 方法
axios 发送 HTTP 请求
Go 后端处理并返回 JSON
Vue 根据返回结果更新 UI
六、前端调用 Go 接口时跨域问题
在实际开发中，很多同学在 HTML / Vue 调用 Go 接口 时，会在浏览器控制台看到类似错误：
Access to fetch at 'http://localhost:8080/user/login'
from origin 'http://127.0.0.1:5500'
has been blocked by CORS policy
这并不是 Go 代码写错，而是 浏览器的安全机制：跨域限制（CORS）。
1.什么是跨域？
浏览器规定：
当前页面的“协议 + 域名 + 端口”必须和接口一致，否则就是跨域。
| http://localhost:8080/login.html | http://localhost:8080/user/login | ❌ 否 |
| http://127.0.0.1:5500/login.html | http://localhost:8080/user/login | ✅ 是 |
| file:///login.html | http://localhost:8080/user/login | ✅ 是 |
只要 有一个不一样，浏览器就会认为是跨域。
2.为什么 Vue / HTML 调用时容易跨域？
-
HTML 用 Live Server（5500 端口）
-
Vue 开发服务器（5173 端口）
-
Go 后端监听（8080 端口）
端口不同 = 跨域
3. 跨域不是 Go 限制，而是浏览器限制
重点理解这句话：
❗ 跨域请求其实已经发到 Go 服务器了
❗ 是浏览器不让前端代码拿到响应
所以解决方案一定是：
后端告诉浏览器：我允许你访问
4. Go 后端开启 CORS（通用做法）
1）最基础的 CORS 处理函数
func enableCORS(w http.ResponseWriter) {
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
}
2）在接口中使用（必须支持 OPTIONS）
func login(w http.ResponseWriter, r *http.Request) {
enableCORS(w)
// 预检请求，直接返回
if r.Method == http.MethodOptions {
return
}
// 正常登录逻辑
}
5.为什么一定要处理 OPTIONS 请求？
当你：
-
使用 POST
-
并且 Content-Type: application/json
浏览器会先发一个 OPTIONS 预检请求：
OPTIONS /user/login
如果后端不处理：
正式请求不会发送
6.Vue 项目中的跨域
Vue 开发阶段通常通过 代理解决跨域：
// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
}
七、HTML + JS vs Vue
| 学习成本 | 低 | 中 |
| 工程化 | ❌ | ✅ |
| 代码组织 | 差 | 好 |
| 适合项目 | 小 demo | 中大型项目 |
八、结语
无论你使用 HTML + JS 还是 Vue：
本质都是：前端通过 HTTP 请求调用 Go 接口
理解了：
-
请求方法（GET / POST）
-
JSON 数据格式
-
接口返回结构
你就掌握了前后端对接的核心能力。
