前端如何调用后端接口：HTML+JS 与 Vue 实践 | 极客日志

JavaScript大前端

前端如何调用后端接口：HTML+JS 与 Vue 实践

综述由AI生成以 Go 语言后端为例，介绍前后端分离架构下的接口调用方式。内容包括 Go 后端接口设计与响应结构，以及前端通过 HTML+JS 原生 Fetch 和 Vue 工程化模式（Axios）调用接口的实现细节。重点讲解了跨域问题（CORS）的产生原因及在 Go 后端和 Vue 开发服务器中的解决方案。最后对比了两种前端方式的优缺点，帮助开发者掌握前后端对接的核心能力。

月光旅人发布于 2026/4/6更新于 2026/5/2127 浏览

本文将以 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"`
}

 {
    
     r.Method != http.MethodPost {
        w.WriteHeader(http.StatusMethodNotAllowed)
        
    }
     req LoginRequest
     err := json.NewDecoder(r.Body).Decode(&req); err !=  {
        json.NewEncoder(w).Encode(Response{
            Code: ,
            Msg:  ,
        })
        
    }
    
     req.Username ==  && req.Password ==  {
        json.NewEncoder(w).Encode(Response{
            Code: ,
            Msg:  ,
            Data: []{
                : ,
            },
        })
        
    }
    json.NewEncoder(w).Encode(Response{
        Code: ,
        Msg:  ,
    })
}

 {
    http.HandleFunc(, login)
    http.ListenAndServe(, )
}

相关免费在线工具

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

<!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('请求失败');
    }
});

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
    })
}

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

前端页面	后端接口	是否跨域
`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`	✅ 是

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
    }
    // 正常登录逻辑
}

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

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

前端如何调用后端接口：HTML+JS 与 Vue 实践

一、整体架构说明

前后端分离架构

二、Go 后端接口准备

更多推荐文章

相关免费在线工具

三、HTML + JavaScript 调用 Go 接口

1. HTML 页面结构

2. JavaScript 调用 Go 接口

3. 代码流程

4. HTML + JS 的特点

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

1. Vue 项目基本结构

2. Vue 中封装 API 请求

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

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

5. Vue 页面中调用 Go 接口

五、Vue 调用流程总结

六、前端调用 Go 接口时跨域问题

1. 什么是跨域？

2. 为什么 Vue / HTML 调用时容易跨域？

3. 跨域不是 Go 限制，而是浏览器限制

4. Go 后端开启 CORS（通用做法）

1）最基础的 CORS 处理函数

2）在接口中使用（必须支持 OPTIONS）

5. 为什么一定要处理 OPTIONS 请求？

6. Vue 项目中的跨域

七、HTML + JS vs Vue

八、结语

更多推荐文章

相关免费在线工具

前端如何调用后端接口：HTML+JS 与 Vue 实践

一、整体架构说明

前后端分离架构

二、Go 后端接口准备

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

更多推荐文章

相关免费在线工具

三、HTML + JavaScript 调用 Go 接口

1. HTML 页面结构

2. JavaScript 调用 Go 接口

3. 代码流程

4. HTML + JS 的特点

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

1. Vue 项目基本结构

2. Vue 中封装 API 请求

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

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

5. Vue 页面中调用 Go 接口

五、Vue 调用流程总结

六、前端调用 Go 接口时跨域问题

1. 什么是跨域？

2. 为什么 Vue / HTML 调用时容易跨域？

3. 跨域不是 Go 限制，而是浏览器限制

4. Go 后端开启 CORS（通用做法）

1）最基础的 CORS 处理函数

2）在接口中使用（必须支持 OPTIONS）

5. 为什么一定要处理 OPTIONS 请求？

6. Vue 项目中的跨域

七、HTML + JS vs Vue

八、结语

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

更多推荐文章

相关免费在线工具