跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
|注册
博客列表

目录

  1. 前端如何调用后端接口（HTML + JS & Vue）
  2. 一、整体架构说明
  3. 前后端分离架构
  4. 二、Go 后端接口准备
  5. 三、HTML + JavaScript 调用 Go 接口
  6. 1. HTML 页面结构
  7. 2. JavaScript 调用 Go 接口
  8. 3. 代码流程
  9. 4. HTML + JS 的特点
  10. 四、Vue 工程模式调用 Go 接口
  11. 1. Vue 项目基本结构
  12. 2. Vue 中封装 API 请求
  13. 3. 创建 axios 实例（src/api/request.js）
  14. 4. 用户接口封装（src/api/user.js）
  15. 5. Vue 页面中调用 Go 接口
  16. 五、Vue 调用流程总结
  17. 六、前端调用 Go 接口时跨域问题
  18. 1. 什么是跨域？
  19. 2. 为什么 Vue / HTML 调用时容易跨域？
  20. 3. 跨域不是 Go 限制，而是浏览器限制
  21. 4. Go 后端开启 CORS（通用做法）
  22. 1）最基础的 CORS 处理函数
  23. 2）在接口中使用（必须支持 OPTIONS）
  24. 5. 为什么一定要处理 OPTIONS 请求？
  25. 6. Vue 项目中的跨域
  26. 七、HTML + JS vs Vue
  27. 八、结语
JavaScript大前端

前端调用 Go 后端接口详解：HTML/JS 与 Vue 实现及跨域处理

以 Go 语言后端为例，讲解前后端分离架构下的接口调用。内容包括 Go 后端接口设计、请求响应结构、前端通过 HTML+JS 和 Vue 工程模式调用接口的具体实现，以及跨域问题（CORS）的解决方案。对比了两种前端方式的优缺点，帮助开发者掌握前后端对接的核心能力。

咸鱼开飞机发布于 2026/4/6更新于 2026/4/132 浏览

前端如何调用后端接口（HTML + JS & Vue）

本文将以 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" placeholder="用户名" id="username">
		</div>
		<div>
			<input type="password" placeholder="密码" id="password">
		</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 调用流程总结

  1. 页面触发点击事件
  2. 调用封装好的 API 方法
  3. axios 发送 HTTP 请求
  4. Go 后端处理并返回 JSON
  5. 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.htmlhttp://localhost:8080/user/login❌ 否
http://127.0.0.1:5500/login.htmlhttp://localhost:8080/user/login✅ 是
file:///login.htmlhttp://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

对比项HTML + JSVue
学习成本低中
工程化❌✅
代码组织差好
适合项目小 demo中大型项目

八、结语

无论你使用 HTML + JS 还是 Vue：

本质都是：前端通过 HTTP 请求调用 Go 接口

理解了：

  • 请求方法（GET / POST）
  • JSON 数据格式
  • 接口返回结构

你就掌握了前后端对接的核心能力。

极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog

更多推荐文章

查看全部
  • Web 项目 UI 自动化测试实战：从零搭建博客系统框架
  • Claude Code 本地安装与环境配置指南
  • AI 时代普通人创作指南：工具选择与实战技巧
  • 自然语言处理（NLP）在法律领域的应用与实战
  • 搭建支持情感控制的二次封装 TTS 服务
  • 十分钟实战：使用 Supabase 构建商业级 AI 图像生成平台后端
  • OpenClaw 开源 AI 助手安装及飞书接入教程
  • OpenClaw 与本地千问模型搭建电脑 AI 助理
  • 2026 年国际主流 AI IDE 排行榜与选型指南
  • AI 大模型应用开发：体系化学习路线与实战指南
  • 基于 OpenClaw 实现公众号文章 AI 自动化创作与发布
  • Flutter 组件 tavily_dart 鸿蒙适配与 AI 搜索集成实战
  • 人工智能 Gemini 2.5 Pro：深度解析技术突破与实战应用
  • Flutter mediapipe_core 鸿蒙化适配指南：端侧 AI 推理与视觉任务实战
  • OpenClaw（龙虾 AI）电脑端部署与日常使用教程
  • AI 绘画工具：灵感画廊极简环境配置指南
  • RuoYi-Vue-Plus AI 智能编程助手配置指南
  • Leather Dress Collection 基于 Stable Diffusion 1.5 的皮革服装 LoRA 实践
  • llama.cpp 性能调优指南：提升本地部署效率
  • 文心一言开源版测评：能力、易用性与价值解析

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online