vue3+vite6+axios，Vite.config代理不生效，请求url总为前端端口

Question

为了解决跨域问题，我配置了vite.config.js，后端端口是8080，前端端口是5173，本地服务器

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

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

登陆的请求代码如下：

<script>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {
    name: 'Login',
    setup() {
        const userType = ref('ROLE_STUDENT'); // 默认选择学生，或根据需求调整
        const studentNumber = ref(''); // 使用 studentNumber
        const password = ref('');
        const router = useRouter();
        const store = useStore();

        const handleLogin = async () => {
            try {
                const response = await axios.post('/api/auth/login', {
                    studentNumber: studentNumber.value, // 使用 studentNumber
                    password: password.value,
                    userType: userType.value
                });

但是运行发送请求的时候，请求url的端口一直是5173:/api/(为了避免浏览器干扰开的无痕模式)

整个问题就像vite.config没有拦截到/api并i替换

有没有人知道是怎么回事，要怎么解决

Answer 1

更换为IP地址即可。

  server: {
    proxy: {
      '/api': {
        // 获取请求中带 /api 的请求
        target: 'http://192.168.50.31:8000', // 后台服务器的源
        changeOrigin: true, // 修改源
        rewrite: (path) => path.replace(/^\/api/, ''), //  /api 替换为空字符串
      },
    },
  },

原理我也不太清除，使用localhost本机地址加上后端的端口号，代理服务器，根本没有将请求正确的发送到后端，因为我在后端根本就没有看到有请求发送过来。