vue3项目将所有访问后端springboot的接口统一管理带跨域

本文主要是介绍vue3项目将所有访问后端springboot的接口统一管理带跨域，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3项目将所有访问后端springboot的接口统一管理带跨域

一、前言
- 1.安装Axios
- 2.创建Axios实例
- 3.创建API服务文件
- 4.在组件中使用API服务
二、跨域
三、总结

一、前言

在Vue 3项目中，统一管理所有访问后端Spring Boot接口的最佳实践是创建一个专门的API服务层。这可以让你的代码更加模块化、可维护和集中管理。你可以使用Axios库作为HTTP客户端来与后端进行通信。以下是详细步骤：

1.安装Axios

首先，确保你在项目中安装了Axios：

npm install axios

2.创建Axios实例

创建一个单独的文件（如axiosInstance.js）来配置Axios实例，这样可以统一管理请求的基本配置（如基础URL、请求拦截器等）。

// src/api/axiosInstance.js
import axios from 'axios';const axiosInstance = axios.create({baseURL: 'http://your-backend-url/api', // 替换为你的后端基础URLtimeout: 10000, // 设置请求超时时间
});// 可以添加请求拦截器
axiosInstance.interceptors.request.use(config => {// 在发送请求之前做些什么，比如添加tokenreturn config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 可以添加响应拦截器
axiosInstance.interceptors.response.use(response => {// 对响应数据做点什么return response;},error => {// 对响应错误做点什么return Promise.reject(error);}
);export default axiosInstance;

3.创建API服务文件

创建一个文件夹（如api），并在其中创建一个文件（如userService.js）来管理所有用户相关的API调用。你可以根据业务逻辑创建多个服务文件，如authService.js, productService.js等。

// src/api/userService.js
import axiosInstance from './axiosInstance';const userService = {getUser(userId) {return axiosInstance.get(`/users/${userId}`);},createUser(userData) {return axiosInstance.post('/users', userData);},updateUser(userId, userData) {return axiosInstance.put(`/users/${userId}`, userData);},deleteUser(userId) {return axiosInstance.delete(`/users/${userId}`);},
};export default userService;

4.在组件中使用API服务

将API服务导入到你的Vue组件中，并调用相应的方法。

<template><div><h1>用户信息</h1><div v-if="user"><p>用户名: {{ user.name }}</p><p>邮箱: {{ user.email }}</p></div></div>
</template><script>
import { ref, onMounted } from 'vue';
import userService from '@/api/userService';export default {name: 'UserProfile',setup() {const user = ref(null);const fetchUser = async () => {try {const response = await userService.getUser(1); // 替换为实际用户IDuser.value = response.data;} catch (error) {console.error('获取用户失败:', error);}};onMounted(fetchUser);return {user,};},
};
</script><style scoped>
/* 添加你的样式 */
</style>

二、跨域

修改文件vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,// 解决使用表格时缩放页面报错devServer: {client: {overlay: false},},chainWebpack: (config) => {config.plugin('define').tap((definitions) => {Object.assign(definitions[0], {__VUE_OPTIONS_API__: 'true',__VUE_PROD_DEVTOOLS__: 'false',__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'})return definitions})},//解决跨域***********************其他代码不是devServer: {proxy: {'/dockingApi': {target: 'http://127.0.0.1:8888/', //接口域名changeOrigin: true,       //是否跨域pathRewrite: {'^/dockingApi': ''  //假如我们的地址是 /dockingApi/member/getToken 会转化为 /member/getToken}},}}})