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

This commit is contained in:
ycy 2024-04-06 15:09:43 +08:00
parent 47929faa04
commit 616c21a62d
4 changed files with 93 additions and 1 deletions

8
src/api/login.js Normal file
View File

@ -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);

View File

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

73
src/utils/request.js Normal file
View File

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

View File

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