首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 前端调用后端接口

前端如何调用Go语言后端接口(HTML + JS & Vue)

2026-01-14 09:01:48 作者：捧花

这篇文章主要介绍了前端如何调用Go语言后端接口(HTML + JS & Vue)的相关资料,文中通过代码还讨论了跨域问题的解决方法,并对比了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" 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 接口

<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

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

八、结语

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

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

理解了：

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

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

到此这篇关于前端如何调用Go语言后端接口(HTML + JS & Vue)的文章就介绍到这了,更多相关前端调用后端接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！