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

在Vue 3项目中，如果你使用axios来发送HTTP请求，那么baseURL用于指定API的基础路径。在Vite的配置文件vite.config.js中，proxy用于配置代理，以便在开发环境中将API请求转发到后端服务器。

以下是如何在axios中设置baseURL和在Vite中配置proxy的简单示例：

axios配置（通常在src/utils/http.js或类似文件中）：

import axios from 'axios';
 
const httpClient = axios.create({
  baseURL: 'http://backend-api.example.com/api/', // 后端API的URL
  // 其他配置...
});
 
export default httpClient;

Vite配置文件（通常在项目根目录的vite.config.js或vite.config.ts中）：

import { defineConfig } from 'vite';
 
export default defineConfig({
  // 其他配置...
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-api.example.com', // 后端API的实际地址
        changeOrigin: true, // 允许跨域
        // 其他代理选项...
      },
    },
  },
});

在这个配置中，当你通过代理访问/api时，所有发送到该路径的请求都会被转发到http://backend-api.example.com。changeOrigin选项设置为true以确保请求头中的Host信息正确反映了原始服务器，这对于处理跨域请求是必要的。

这样配置后，当你使用httpClient发送请求时，例如httpClient.get('/some-endpoint')，axios会将请求发送到http://backend-api.example.com/api/some-endpoint。Vite服务器会根据配置文件中定义的proxy规则将请求转发到后端服务器。