Vue3+Axios服务转发

康弟弟2025-09-122025-09-12

0. 序

目标：

前端登录后，

① 进行基础查询： /exam/findAllExam =》 axios拼接: /api/exam/findAllExam+head:token =》
② VueConfig: /api/exam/findAllExam 替换 https://example.com/exam/findAllExam

1. axios安装

axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求。要安装它，请打开终端或命令提示符，然后输入以下命令：

1	npm install axios --save

1.2 Vue引入

找到main.ts

// 引入
import axios from 'axios';
//全局配置
app.config.globalProperties.$axios = axios;

1.3 自定义axios

在请求前加上/api/ 和请求头需要自定义axios方法：

创建 src/utils/request.js

import axios from 'axios';
// 全局token
import { getToken } from './auth.js';

// 创建Axios实例
const service = axios.create({
  baseURL: '/api',
  timeout: 5000,
});
console.log('request.js 已加载，拦截器初始化完成');
// 请求拦截器
// src/utils/request.js
service.interceptors.request.use(
  (config) => {
    console.log('=== 进入请求拦截器 ==='); // 新增这行
    const token = getToken();
    console.log('拦截器中获取的token:', token); // 打印token具体值
    console.log('当前请求路径:', config.url); // 打印请求路径
    if (token) {
       //添加请求头
      config.headers['Access-Token'] = token;
      console.log('已添加请求头:', config.headers['Access-Token']); // 确认添加成功
    } else {
      console.log('token为空，未添加请求头'); // 排查token是否存在
    }
    return config;
  },
  (error) => {
    console.error('请求拦截器错误:', error);
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error('接口请求失败:', error);
    if (error.response?.status === 401) {
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

// 关键：必须使用默认导出
export default service;

1.4 引入自定axios

在上述的main.ts中，去掉自带的axios。

// 引入
//import axios from 'axios';
import service from './utils/request.js' 
//全局配置
//app.config.globalProperties.$axios = axios;
app.config.globalProperties.$axios = service;

自此①已经实现

2. 路由转发

通过proxy进行跨域

在根目录下创建vite.config.ts

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    host: 'localhost',
    port: 5173,
    open: false,
    proxy: {
      // 匹配所有以/api开头的请求，包括多级路径
      '/api': {
        target: 'http://localhost:9998',
        //  target: 'http://localhost:4678',    
        // target: 'https://example.com',
        changeOrigin: true,
        ws: true, // 支持WebSocket
        rewrite: (path) => path.replace(/^\/api/, ''),
        // 增加日志以便调试
        configure: (proxy, options) => {
          proxy.on('proxyReq', (proxyReq, req, res) => {
            console.log(`[Proxy] ${req.method} ${req.url} -> ${options.target}${req.url.replace('/api', '')}`);
          });
        }
      }
    }
  },
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    sourcemap: true,
    chunkSizeWarningLimit: 2000,
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['vue', 'vue-router', 'vuex']
        }
      }
    }
  },
  css: {
    devSourcemap: true
  }
})