【前端】Vue + Axios 跨域问题实战：7070 代理转发 8080 + 401 报错分析（黑马外卖）

文章目录

前言
[定义概念 + 缩写](#定义概念 + 缩写)
- [1️⃣ Axios 是什么？](#1️⃣ Axios 是什么？)
- [2️⃣ 常用 API](#2️⃣ 常用 API)
性质
- 一、统一写法（推荐）
- [二、GET 与 POST 示例](#二、GET 与 POST 示例)
- - [POST 示例](#POST 示例)
  - [GET 示例](#GET 示例)
使用步骤
- 一、为什么会出现跨域问题？
- [二、Vue 中配置代理（核心）](#二、Vue 中配置代理（核心）)
- - 解释
- [三、401 报错原因分析](#三、401 报错原因分析)
- - [1️⃣ 没带 token](#1️⃣ 没带 token)
  - [2️⃣ token 过期](#2️⃣ token 过期)
  - [3️⃣ 登录接口路径错误](#3️⃣ 登录接口路径错误)
- 四、结合黑马外卖接口说明
- [五、推荐封装 axios](#五、推荐封装 axios)
总结
参考文献

前言

在学习 Vue + SpringBoot 前后端分离开发过程中，使用 axios 发送请求时遇到了两个典型问题：

跨域问题（7070 → 8080）
401 未授权错误

本文基于网课学习记录 + 黑马外卖项目接口，总结 axios 的使用方式、代理配置方式以及 401 错误的本质原因。

定义概念 + 缩写

1️⃣ Axios 是什么？

Axios 是一个基于 Promise 的网络请求库，用于浏览器和 Node.js 中。

安装：

bash 复制代码

npm install axios

引入：

js 复制代码

import  axios from 'axios'

2️⃣ 常用 API

js 复制代码

axios.get(url, config)
axios.post(url, data, config)
axios.put(url, data, config)
axios.delete(url, config)
axios.patch(url, data, config)

参数说明：

参数	说明
url	请求路径
data	请求体数据（JSON）
config	配置对象（headers、params 等）

性质

一、统一写法（推荐）

axios 其实可以统一写成：

js 复制代码

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

这种写法在复杂请求中更清晰。

二、GET 与 POST 示例

POST 示例

js 复制代码

axios.post('/api/admin/employee/login', {
  username: 'admin',
  password: '123456'
}).then(res => {
  console.log(res.data)
}).catch(error => {
  console.log(error.response)
})

GET 示例

js 复制代码

axios.get('/api/admin/shop/status', {
  headers: {
    token: 'xxx.yyy.zzz'
  }
})

使用步骤

一、为什么会出现跨域问题？

前端运行在：

复制代码

http://localhost:7070

后端运行在：

复制代码

http://localhost:8080

浏览器同源策略：

协议 + 域名 + 端口必须一致

端口不同 → 跨域

二、Vue 中配置代理（核心）

在 vue.config.js 中配置：

js 复制代码

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  devServer: {
    port: 7070,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

解释

当你前端写：

js 复制代码

axios.get('/api/admin/shop/status')

真实访问路径会被转发成：

复制代码

http://localhost:8080/admin/shop/status

浏览器看到的仍然是 7070 → 7070（同源）

Vue 开发服务器在中间做代理。

三、401 报错原因分析

报错：

复制代码

Request failed with status code 401

401 = 未授权（Unauthorized）

常见原因：

1️⃣ 没带 token

Spring Security 或 JWT 校验失败。

比如后端接口要求：

http 复制代码

Authorization: Bearer token

或

http 复制代码

token: xxx

如果没有传 → 401

2️⃣ token 过期

JWT 默认有有效时间。

3️⃣ 登录接口路径错误

比如：

你请求：

复制代码

/api/admin/employee/login

但真实接口是：

复制代码

/admin/employee/login

如果 proxy rewrite 不对，也会导致认证失败。

四、结合黑马外卖接口说明

例如员工登录接口：

复制代码

POST /admin/employee/login

正确写法：

js 复制代码

axios.post('/api/admin/employee/login', {
  username: 'admin',
  password: '123456'
})

登录成功后拿到：

json 复制代码

{
  "code": 0,
  "data": {
    "id": 1,
    "name": "张三",
    "token": "xxxx"
  }
}

之后：

js 复制代码

axios.defaults.headers.common['token'] = token

否则访问其他接口：

复制代码

/admin/category/page

就会返回 401。

五、推荐封装 axios

在毕设中建议统一封装：

js 复制代码

import axios from 'axios'

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

request.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.token = token
  }
  return config
})

export default request

这样就不会每次手动写 header。

总结

本次学习核心收获：

axios 本质是 Promise 封装的 http 客户端
GET 和 POST 区别是 data 与 params
跨域问题在开发环境用 devServer proxy 解决
7070 → 8080 本质是 Vue 开发服务器做中间转发
401 ≠ 跨域，大多数是 token 问题
建议统一封装 axios + 请求拦截器

参考文献

$1$ Axios 官方文档

https://axios-http.com

$2$ 黑马外卖项目接口文档