前端如何调用后端接口（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 数据格式

  • 接口返回结构

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

相关推荐
扶我起来还能学_1 小时前
Vue3 proxy 数据响应式的简单实现
前端·javascript·vue
一只努力学习的Cat.2 小时前
Linux:五种IO模型
linux·服务器
jqrbcts2 小时前
关于发那科机器人如何时时把角度发给PLC
java·服务器·网络·人工智能
Atri厨2 小时前
awk入门练习题
linux·运维·服务器
zhglhy2 小时前
ckman创建集群报错 数据校验失败: invaild ip range
服务器·网络·tcp/ip
bybitq2 小时前
Go 语言之旅方法（Methods）与接口（Interfaces）完全指南
开发语言·golang·xcode
玄同7653 小时前
Python 流程控制：LLM 批量推理与 API 限流处理
服务器·人工智能·python·深度学习·自然语言处理·数据挖掘·知识图谱
zeijiershuai3 小时前
Linux、Linux常用命令、Linux软件安装、Linux项目部署
linux·运维·服务器
有一个好名字3 小时前
Spring Boot 依赖注入指南：多种方式深度剖析与代码演示
java·服务器·spring boot
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击03电脑检测软件—图吧工具箱04Web安全中SQL注入绕过WAF的具体手法和实战案例05Linux下V2Ray安装配置指南063D 圣诞树网页代码07UV安装并设置国内源08SQLmap 完整使用指南：环境搭建 + 命令详解 + 实操案例09jdk21下载、安装（Windows、Linux、macOS）10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）