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

捧 花2025-12-28 14:01

本文将以 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 后端代码示例

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 页面结构

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 接口

javascript 复制代码 
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.代码流程

  1. 监听表单提交

  2. 阻止浏览器默认刷新

  3. 获取输入框数据

  4. 使用 fetch 发送 HTTP 请求

  5. 请求体转成 JSON

  6. 解析 Go 返回的 JSON

  7. 根据 code 判断成功或失败

4. HTML + JS 的特点

✅ 优点：

  • 简单直接

  • 学习成本低

  • 无需工程化

❌ 缺点：

  • 代码容易混乱

  • 不适合复杂项目

  • 不利于组件复用

四、Vue 工程模式调用 Go 接口

这是实际开发中最常用的方式。

1、Vue 项目基本结构

使用 Vite 创建 Vue 项目后，常见结构：

复制代码 
src/
 ├── api/          # 所有接口请求
 │    └── user.js
 ├── views/        # 页面
 │    └── Login.vue
 ├── main.js

2、Vue 中封装 API 请求

安装 axios

javascript 复制代码 
npm install axios

3. 创建 axios 实例（src/api/request.js）

javascript 复制代码 
import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 5000
})

export default request

4. 用户接口封装（src/api/user.js）

javascript 复制代码 
import request from './request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

5、Vue 页面中调用 Go 接口

Login.vue

javascript 复制代码 
<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.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 处理函数
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")
}
2）在接口中使用（必须支持 OPTIONS）
Go 复制代码 
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 开发阶段通常通过 代理解决跨域：

Go 复制代码 
// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

七、HTML + JS vs Vue

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

八、结语

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

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

理解了：

  • 请求方法（GET / POST）

  • JSON 数据格式

  • 接口返回结构

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

相关推荐
有续技术9 小时前
哈斯 (Haas) 机床 IP、端口号配置内容总结
运维·服务器
心念枕惊9 小时前
新写了个直播录制工具，可录制抖音快手斗鱼直播
运维·服务器·数据库
躺不平的理查德9 小时前
CMAKE备忘录
linux·运维·服务器
9624569 小时前
跨域与私有网络访问限制排查实录
运维·服务器·网络
不在逃避q10 小时前
一步一步学习使用LiveBindings（）TListView进阶使用（），打造天气预报程序
服务器·数据库·学习
gsls20080810 小时前
大模型供应商API端点兼容协议
大模型·api·协议·兼容
诸葛老刘10 小时前
Ubuntu 服务器常用运维命令
运维·服务器·ubuntu
红叶舞11 小时前
成数据绑定对象，在应用程序中处理完数据后，将更新的数据序列化为JSON传回远端服务器，很多移动应用使用了这种模式处理服务器端的数据。 ...
运维·服务器·json
深圳恒讯11 小时前
H100服务器是什么？H100服务器适合哪些企业？
运维·服务器
ZJH__GO11 小时前
网络编程v4--群聊和私聊的实现
运维·服务器·网络
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）05AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07AI科技热点日报 | 2026年07月01日082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？092026上半年大模型全景技术解读：推理融合、Agent 爆发与多模态统一102026 年 AI 大模型 & AI 编程工具实战全总结