以 Go 语言后端为例，介绍前后端分离架构下的接口设计与调用。内容涵盖 Go 接口结构定义、HTML+JavaScript 使用 fetch 原生调用、Vue 工程化模式下 axios 封装与请求流程。重点解析了跨域问题（CORS）的成因及解决方案，包括后端响应头设置与前端开发服务器代理配置。最后对比了两种前端调用方式的适用场景，帮助开发者掌握前后端对接核心能力。
本文将以 Go 语言后端 为例，详细介绍：
浏览器 | | HTTP 请求（JSON） ↓ 前端（HTML / Vue） | | HTTP 请求 ↓ Go 后端（API） | | JSON 响应 ↓ 前端渲染页面
先准备一个最简单但标准的 Go 接口，方便前端调用。
| 项目 | 内容 |
|---|---|
| URL | /user/login |
| 方法 | POST |
| 请求类型 | application/json |
| 返回类型 | application/json |
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
这是最原始、最直观的方式，非常适合：
<!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>
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('请求失败');
}
});
fetch 发送 HTTP 请求code 判断成功或失败✅ 优点：
❌ 缺点：
这是实际开发中最常用的方式。
使用 Vite 创建 Vue 项目后，常见结构：
src/
├── api/ # 所有接口请求
│ └── user.js
├── views/ # 页面
│ └── Login.vue
└── main.js
安装 axios：
npm install axios
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8080',
timeout: 5000
})
export default request
import request from './request'
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}
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>
在实际开发中，很多同学在 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）。
浏览器规定： 当前页面的'协议 + 域名 + 端口'必须和接口一致，否则就是跨域。
| 前端页面 | 后端接口 | 是否跨域 |
|---|---|---|
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 | ✅ 是 |
只要 有一个不一样，浏览器就会认为是跨域。
端口不同 = 跨域
重点理解这句话：
❗ 跨域请求其实已经发到 Go 服务器了 ❗ 是浏览器不让前端代码拿到响应
所以解决方案一定是： 后端告诉浏览器：我允许你访问
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")
}
func login(w http.ResponseWriter, r *http.Request) {
enableCORS(w) // 预检请求，直接返回
if r.Method == http.MethodOptions {
return
}
// 正常登录逻辑
}
当你：
POSTContent-Type: application/json浏览器会先发一个 OPTIONS 预检请求：
OPTIONS /user/login
如果后端不处理： 正式请求不会发送
Vue 开发阶段通常通过 代理解决跨域：
// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
}
| 对比项 | HTML + JS | Vue |
|---|---|---|
| 学习成本 | 低 | 中 |
| 工程化 | ❌ | ✅ |
| 代码组织 | 差 | 好 |
| 适合项目 | 小 demo | 中大型项目 |
无论你使用 HTML + JS 还是 Vue：
本质都是：前端通过 HTTP 请求调用 Go 接口
理解了：
你就掌握了前后端对接的核心能力。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online