Vue3前端访问后端API的两个配置（axios中的baseURL与vite.config.js中的proxy)

在现代前端开发中，后端API的调用是非常常见的需求。以Vue 3为开发框架时，我们通常使用axios库来进行HTTP请求。同时，由于前后端可能分离部署，跨域问题时常出现，因此需要一些配置来确保前端能够顺利地访问后端API。本文将介绍如何在Vue 3项目中，配置axios的baseURL以及在vite.config.js中设置代理（proxy）。

一、使用axios的baseURL

axios是一个基于Promise的HTTP客户端，可以用于浏览器和node.js。配置baseURL可以让我们在发送请求时，只需提供相对路径，而不需要每次都写完整的URL。

1. 安装axios

首先确保你已经安装了axios：

npm install axios

2. 配置axios的baseURL

在你的Vue 3项目中，可以创建一个axios.js文件来配置axios实例，示例如下：

// src/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000/api', // 设置后端API的基本路径
  timeout: 10000, // 设置请求超时时间
});

// 可以添加请求拦截器
instance.interceptors.request.use((config) => {
  // 在请求发送之前做某些事情
  return config;
}, (error) => {
  return Promise.reject(error);
});

// 可以添加响应拦截器
instance.interceptors.response.use((response) => {
  return response.data; // 直接返回数据
}, (error) => {
  return Promise.reject(error);
});

export default instance;

在上述代码中，我们创建了一个axios实例，并通过baseURL配置了后端API的基本路径。这样后续的请求只需要写相对路径：

// src/api/user.js
import axios from '../axios';

export const getUser = (userId) => {
  return axios.get(`/users/${userId}`);
};

二、配置vite.config.js中的代理

在开发过程中，前端和后端往往在不同的端口运行，这就会引发跨域请求的问题。此时，我们可以通过配置Vite的代理来解决。

1. 修改vite.config.js

在项目根目录下的vite.config.js文件中进行以下配置：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务地址
        changeOrigin: true, // 支持跨域
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
      },
    },
  },
});

上述配置中，我们将以/api开头的请求都代理到http://localhost:3000。当请求/api/users时，Vite会自动将其转发到http://localhost:3000/users，并解决跨域问题。

三、前后端集成

在完成上述配置后，可以使用以下代码调用API：

// src/components/User.vue
<template>
  <div>
    <h1>User Info</h1>
    <pre>{{ user }}</pre>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getUser } from '../api/user';

export default {
  setup() {
    const user = ref(null);

    onMounted(async () => {
      try {
        user.value = await getUser(1);
      } catch (error) {
        console.error('Failed to fetch user:', error);
      }
    });

    return {
      user,
    };
  },
};
</script>

以上代码实现了在组件加载时获取用户信息的功能。通过配置好的axios和Vite的代理，我们能够方便地访问后端API，而无需担心跨域问题。

总结

在Vue 3项目中，配置axios的baseURL和Vite的代理是解决前后端交互时的跨域和路径问题的有效方法。通过以上的示例配置，开发者可以更加便捷地进行前端开发，同时保证与后端API的顺利连接。