✨ feat: axiox二次封装配置代理解决跨域

src/api/login.js

@@ -0,0 +1,8 @@
+import request from "@/utils/request";
+// 统一管理接口
+const API = {
+  LOGIN_URL: "/api/user",
+  udaiu: "/user",
+};
+export const reqUser = () => request.get(API.LOGIN_URL);
+export const reqUser = (data) => request.post(API.LOGIN_URL, data);

src/pages/login/index.vue

@@ -46,6 +46,7 @@
 <script setup>
 import { MessagePlugin } from "tdesign-vue-next";
 import { reactive, ref } from "vue";
+import { reqUser } from "@/api/login";
 // import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
 
 const INITIAL_DATA = {
@@ -91,7 +92,8 @@ const rules = reactive({
 const onReset = () => {
   MessagePlugin.success("重置成功");
 };
-const onSubmit = ({ validateResult, firstError }) => {
+const onSubmit = async ({ validateResult, firstError }) => {
+  await reqUser();
   if (validateResult === true) {
     MessagePlugin.success("提交成功");
   } else {

src/utils/request.js

@@ -0,0 +1,73 @@
+// 进行axios二次封装：使用请求与响应拦截器
+import axios from "axios";
+import { MessagePlugin } from "tdesign-vue-next";
+import { useRouter } from "vue-router";
+
+// import { refreshToken } from '@/apis/token'
+// import { useTokenStore } from '@/stores/index'
+// 第一步:利用axios对象的create方法，去创建axios实例(其他的配置:基础的路径、超时的时间)
+const request = axios.create({
+  baseURL: "/", // 基础路径上会携带/api
+  timeout: 5000, // 超时的时间的设置
+});
+// 第二步：axios实例添加请求与响应拦截器
+request.interceptors.request.use((config) => {
+  // config配置对象，headers属性请求头，经常给服务器端携带公共参数
+  // 返回配置对象
+  // const { token } = useTokenStore()
+  // if (token) {
+  //   config.headers.Authorization = `Bearer ${token}`
+  // }
+  return config;
+});
+
+// 第三步：axios响应拦截器
+request.interceptors.response.use(
+  (response) => {
+    // 成功回调
+    // 简化数据
+    return response.data;
+  },
+  async (error) => {
+    // 失败回调：处理http网络错误的
+    // 定义一个变量：存储网络错误信息
+    let message = "";
+    const { status } = error.response;
+    // http状态码
+    switch (status) {
+      case 401:
+        // try {
+        //   const tokenStore = useTokenStore()
+        //   const refreshedTokenData = await refreshToken(tokenStore.refreshToken)
+        //   if (refreshedTokenData && refreshedTokenData.data.token) {
+        //     tokenStore.setToken(refreshedTokenData.data.token)
+        //     const originalRequest = error.config
+        //     originalRequest.headers.Authorization = `Bearer ${refreshedTokenData.data.token}`
+        //     return request(originalRequest)
+        //   }
+        // } catch (error) {
+        //   const tokenStore = useTokenStore()
+        //   tokenStore.clearToken()
+        //   useRouter().push('/login')
+        // }
+        break;
+      case 403:
+        message = "无权访问";
+        break;
+      case 404:
+        message = "请求地址错误";
+        break;
+      case 500:
+        message = "服务器出现问题";
+        break;
+      default:
+        message = "网络出现问题";
+        break;
+    }
+    MessagePlugin.error(message);
+    return Promise.reject(error);
+  }
+);
+
+// 对外暴露
+export default request;

vite.config.js

@@ -8,6 +8,15 @@ import { viteMockServe } from "vite-plugin-mock";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://192.168.1.10:8000",
+        changeOrigin: true,
+      },
+    },
+  },
+
   plugins: [
     vue(),
     vueJsx(),