Vite不会重写Axios实例 / VUE 3组成API的代理路径

Question

我正在使用Coption API和Vite进行我的第一个项目。 我正在努力避免CORS问题，需要代表我的请求。

vite.config.js

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    proxy: {
      '/api': {
        target: 'https://dest.com/api',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

我正在使用vue-axios作为我的请求。

main.js

// Axios
import axios from 'axios';
import VueAxios from 'vue-axios';

import App from './App.vue';
import router from './router';

const app = createApp(App);

// Init
app.use(createPinia());
app.use(router);
app.use(PrimeVue);
app.use(VueAxios, axios);

app.mount('#app');

到目前为止，这很好。但是，当我从这样的自定义AXIOS实例中提出请求时，

import axios from 'axios';

export const SMCCLIENT = axios.create({
  baseURL: `https://dest.com`,
  auth: {
    username: '',
    password: '',
  },
  header: {
    'Access-Control-Allow-Origin': '*',
  },
});

代理不会处理请求。

test.vue

async function getElements() {
  const test = await SMCCLIENT.get('/api/test/', {
  });
  console.log(test);
}

导致CORS错误

test.vue

async function getElements() {
  const test = await axios.get('/api/test/', {
  });
  console.log(test);
}

工作效果很好 有什么想法吗？