vite+vue3 如何解决axios 的跨域问题，无需后端进行配置

在Vite + Vue3 中处理axios的跨域问题，通常不需要后端配置，因为Vite提供了一个内置的开发服务器，可以自动处理本地开发环境下的CORS问题。以下是一种常见的解决方案：

1. **Vue.config.js 配置**:
- 在`src`目录下创建或打开`vue.config.js`文件，这是一个全局的配置文件。

   import axios from 'axios';
   
   module.exports = {
     devServer: {
       proxy: [
         // 使用代理规则，将所有匹配 '/api' 的请求转发到 'http://localhost:8080' (假设你的后端服务运行在这里)
         {
           target: 'http://localhost:8080',
           changeOrigin: true,
           pathRewrite: { '^/api': '' }, // 将'/api'前缀替换为空字符串
         },
       ],
     },
     configureWebpack: config => {
       if (process.env.NODE_ENV === 'production') {
         // 生产环境不启用代理，生产构建会直接发送请求到服务器
         delete config.devServer.proxy;
       }
     },
     axios: axios, // 注册axios实例，确保它会被应用到组件中
   };

2. **在组件中使用axios**:
现在可以在Vue组件内部正常使用`this.$axios`，它已经配置好了跨域。

<template>
  <div>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      this.$axios.get('/api/data').then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error('Error fetching data:', error);
      });
    },
  },
};
</script>