vue3 axios封装加代理

Vue 3 中封装 Axios 并配置代理
封装 Axios 实例
为了更好地管理和维护 HTTP 请求，通常会创建一个独立的模块用于初始化和配置 Axios 实例。下面是一个简单的 axios.js 文件实现：
// src/utils/axios.js
import axios from 'axios';

const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // API 的 base_url
timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);

// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data;
// 如果返回的状态码不是2xx，则认为是有错的
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error'
});
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
console.log('err' + error); // for debug
Message({
message: error.message,
type: 'error'
});
return Promise.reject(error);
}
);

export default service;
登录后复制
此部分代码展示了如何设置基础 URL 和默认超时，并定义了两个重要的中间件——请求前处理逻辑与响应后的数据解析[^2]。
注册全局 $http 方法
为了让整个应用都能方便地访问这个自定义的 Axios 客户端实例，可以在应用程序启动时将其注册为全局属性。这可以通过修改项目的入口文件完成，如下所示：
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import router from './router';
import Vant from 'vant';
import 'vant/lib/index.css';
import axios from './utils/axios';

const app = createApp(App);

app.config.globalProperties.$http = axios;

app.use(store)
.use(router)
.use(Vant)
.mount('#app');
登录后复制
这段脚本说明了怎样把刚才建立的服务作为名为 $http 的全局函数暴露给所有的组件使用。
创建服务层接口
接下来可以基于上面提到的基础客户端构建具体业务场景下的 API 接口调用方法。这里给出一个例子展示如何定义登录功能对应的远程过程调用(RPC):
// src/apis/user.ts
import service from '@/utils/axios';

interface ILoginData {}

export function login(data: ILoginData): any {
return service({
url: '/login', // 这里应该是实际服务器提供的路径
method: 'post',
data
})
}
登录后复制
此处介绍了如何利用先前准备好的 Axios 工具类去执行特定类型的HTTP操作，比如 POST 登录验证请求[^4]。
配置开发环境中的代理
当处于本地调试阶段时，可能会遇到跨域资源共享(CORS)的问题。为了避免这种情况发生，推荐采用 Webpack DevServer 提供的功能来进行反向代理设置。编辑 vite.config.ts 或者 .env.development.local 来指定转发规则:
对于Vite项目，在 vite.config.ts 添加 proxy 设置：
// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
server: {
proxy: {
'^/api': {
target: 'https://example.com/api/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
},
},
},
})
登录后复制
如果是Webpack项目则在 webpack.dev.conf.js 修改 devServer.proxy 属性:
module.exports = {
// ...
devServer: {
host: 'localhost',
port: 8080,
open: true,
hotOnly: false,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://jsonplaceholder.typicode.com/', // 替换成目标API地址
ws: true,
changeOrigin: true,
secure: false,
pathRewrite: {'^/api' : ''}
}
}
}
};
登录后复制
以上内容解释了如果要解决前后端分离架构下常见的 CORS 错误应该如何调整开发工具链的相关选项[^1]。