vite axios代理跨域 404

在使用Vite构建开发环境时，如果遇到了通过axios请求后端接口时出现404错误，这通常是因为代理配置不正确导致的。Vite的代理功能可以帮助我们解决开发时的跨域问题，使得前端可以向本地开发服务器转发请求到指定的后端服务器。以下是一种解决方法：

1. 确保你的Vite配置文件（通常是`vite.config.js`）中正确设置了代理规则。
2. 使用`proxy`属性在Vite配置中配置代理，将前端请求转发到后端服务地址。如果你使用的是开发服务器的默认端口（例如8080），代理配置可能看起来像这样：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  proxy: {
    '/api': {
      target: 'http://localhost:3000', // 后端服务器地址
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
});

在这个配置中，所有以`/api`开头的请求都会被转发到`http://localhost:3000`。`changeOrigin`设置为`true`是为了让代理服务器发送请求时显示为代理服务器的IP地址，而不是本地主机。`rewrite`函数用于调整请求路径。

3. 如果你使用的是Vue组件来发起axios请求，确保你的请求URL前缀与代理配置中的前缀匹配。例如：

import axios from 'axios';

axios.get('/api/users').then((response) => {
  console.log(response.data);
});

4. 确保后端服务已经启动并且能够正常响应请求。